Components / Navigation / Number-key router
N2 · Navigation
Number-key router
Digits 1–9 and 0 switch the current view, with the legend in the footer.
<div data-yr="number-key-router" tabindex="0">
<p class="value" data-view="1">Register</p>
<p class="sub"><kbd>1</kbd> Register <kbd>2</kbd> Schedule <kbd>0</kbd> All</p>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- The product is a set of peer views.
- A legend can stay visible.
When not to use
- The page is mostly typing.
- Views are nested inside a form.
Usage
<div data-yr="number-key-router" tabindex="0">
<p class="value" data-view="1">Register</p>
<p class="sub"><kbd>1</kbd> Register <kbd>2</kbd> Schedule <kbd>0</kbd> All</p>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data-view | digit | 1 | Current view key. |
| data-legend | digit | — | Legend key that matches a view. |
Keyboard
| Key | Action |
|---|---|
| 1–9, 0 | Switches the view. |
| Typing fields | Digits pass through to the field. |
Accessibility
- The current view name is text, not only a highlight.
- The legend lists every digit.
- Key handling ignores inputs, textareas, and selects.
Motion
- The view name replaces in place. No enter animation on each key.
Pattern origin
Pattern type: keyboard view switching.