Bar
The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
Kit part · Navigation · Sidebars
Side rail
App navigation in a panel: the current page is a recess with its lamp lit. The rail on the left of this page is one.
- Element
- <nav>
- Needs
- kit.css
- Rules
- navigation.rules.md · 3
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Rest | Hover | Current | Focus |
|---|---|---|---|---|
| Link |
Graphite
| Part | Rest | Hover | Current | Focus |
|---|---|---|---|---|
| Link |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-side | class | on <nav> | A grid of links 34px tall, each with an unlit lamp at the right. |
| .tui-label | class | inside | A group heading. |
| aria-current="page" | attribute | on a link | Recessed, full ink, lamp lit green. |
| svg | element | inside a link | Optional icon, 16px. |
Markup
<nav class="tui-panel tui-side" aria-label="Main">
<span class="tui-label">Studio</span>
<a href="/overview" aria-current="page">Overview</a>
<a href="/sessions">Sessions</a>
<a href="/library">Library</a>
</nav>Needs kit.css only, no script. How to install the kit.
Accessibility
aria-current="page"is what styles the current link, so the visual and the announced state cannot drift apart.- The lamp is decoration on top of the recess and the ink weight.
How it’s built
Links in a grid. Each has an ::after lamp; the current one gets the kit’s recess and a lit lamp. On phones these docs move the same rail into a native <dialog> drawer.
Rules
navigation.rules.mdIn the brain
The current page is a recess with its lamp lit; links are grouped under printed labels.
3 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.