Components / Navigation / Side nav
N1 · Navigation
Side nav
Grouped destinations with a new chip, a lock, and a number-key hint.
<nav class="c-sidenav" aria-label="Example sections">
<p class="label">Register</p>
<button type="button" class="c-navitem on" data-nav="inbox" data-key="1" aria-current="page"><span>Inbox</span><span class="c-meta"><span class="chip">New</span><kbd>1</kbd></span></button>
<button type="button" class="c-navitem is-locked" data-nav="holds" data-key="3" aria-disabled="true"><span>Holds</span><span class="c-meta"><span class="c-lock">Locked</span><kbd>3</kbd></span></button>
</nav>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A product has several destinations that cluster into groups.
- People switch sections often enough to remember a digit.
When not to use
- The page has fewer than five destinations.
- The only task is a single form.
Usage
<nav class="c-sidenav" aria-label="Example sections">
<p class="label">Register</p>
<button type="button" class="c-navitem on" data-nav="inbox" data-key="1" aria-current="page"><span>Inbox</span><span class="c-meta"><span class="chip">New</span><kbd>1</kbd></span></button>
<button type="button" class="c-navitem is-locked" data-nav="holds" data-key="3" aria-disabled="true"><span>Holds</span><span class="c-meta"><span class="c-lock">Locked</span><kbd>3</kbd></span></button>
</nav>
Variants
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data-nav | id | — | Destination id handled by the router. |
| data-key | 1–7 | — | Digit hint shown on the item. |
| class on | class | absent | Selected item. Pair with aria-current=page. |
| class is-locked | class | absent | Item stays in the list and does not select. |
| chip New | element | absent | Marks a destination that is new in this example. |
Keyboard
| Key | Action |
|---|---|
| 1–7 | Selects the matching item. Locked digits do nothing. |
| Tab | Moves through the items. |
Accessibility
- Each destination is a button with a visible name.
- The selected item exposes aria-current=page.
- Locked items expose aria-disabled and stay in the tab order so the lock is discoverable.
- The digit is a hint, not the only name.
Motion
- Selection colour changes with the page. No motion token runs on select.
Pattern origin
Pattern type: grouped sidebar with shortcut digits.