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.
Kit part · Navigation
Bar
The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
- Element
- <header>
- 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 | Link | Hover | Current | Focus |
|---|---|---|---|---|
| Link |
Graphite
| Part | Link | Hover | Current | Focus |
|---|---|---|---|---|
| Link |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-bar | class | on <header> | A flex row, 56px tall, 20px sides. |
| .tui-bar__brand | class | on <a> | The wordmark: bold, tight, with a lamp before it. |
| .tui-bar__links | class | on <nav> | Printed links, pushed right. |
| aria-current="page" | attribute | on a link | Prints the current page in full ink. |
Markup
<header class="tui-bar">
<a class="tui-bar__brand" href="/"><span class="tui-lamp" data-on></span>Quiet</a>
<nav class="tui-bar__links" aria-label="Main">
<a href="/features" aria-current="page">Features</a>
<a href="/pricing">Pricing</a>
<a href="/docs">Docs</a>
</nav>
<a class="tui-key tui-key--primary tui-key--sm" href="/start">Start free</a>
</header>Needs kit.css only, no script. How to install the kit.
Accessibility
- Give the
<nav>anaria-label; mark the current page witharia-current="page", which also styles it. - On phones, let it wrap or move links into a menu; do not let it scroll the page sideways.
How it’s built
A flex row and type, nothing else. The lamp is the kit’s lamp; the key is the kit’s key.
Rules
navigation.rules.mdIn the brain
Brand with a lamp, links, and one contrast key at most.
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.