Navigation and menus
Always know where you are
Navigation answers three questions on every screen: where am I, what is here, and where can I go next.
- The current location is marked in two ways: weight or fill, and
aria-current. - Navigation labels are nouns (“Licences”); actions are verbs (“Issue licence”).
- Keep navigation in the same place on every screen. Never hide primary navigation on desktop.
Tabs
Tabs switch between views of the same object. Three styles cover every case.
Tab styles
Underline tabs: page-level sections
Segmented control: switch a view or filter
Ribbon tabs: documents and workspaces inside a panel
Chapter 2 of 5 · locked by Layla Haddad
| State | Underline | Segmented | Ribbon |
|---|---|---|---|
| Active | Heading colour + 2px Midnight underline | Raised white segment, shadow 1 | Joined to the panel, 2px action-colour top edge |
| Inactive | Caption colour | Caption colour on panel | Panel background |
| Hover | Heading colour | Heading colour | Heading colour |
| Disabled | 40% opacity, skipped by arrow keys | same | same |
| Counter | Neutral count badge after the label | — | — |
- Keyboard: arrow keys move between tabs, Home/End jump; Tab moves into the panel.
- Overflow on small screens: tabs scroll horizontally with a fade at the edge; never wrap to two lines.
- 2–7 tabs. More than that is navigation, not tabs.
Breadcrumbs
Show the path, link the parents
- Use in hierarchies deeper than two levels: Admiral › Licences › Department of Planning.
- Every crumb except the last is a link. The current page is plain text with
aria-current="page". - On mobile show only the parent as a back link: “‹ Licences”.
Pagination
Pagination
1–25 of 291 users
- Show the range and total (“1–25 of 291”) next to the controls.
- Keep page size selectable in tables (25, 50, 100).
- For feeds and logs, prefer “Load more” or infinite scroll with a visible position.
Stepper
Stepper (Shaheen analysis)
- Plan
- Approve
- Specialists
- Validate
- Deliver
Use a stepper for real sequences only: multi-step forms and long-running processes. Done steps can be revisited; future steps cannot be skipped.
Trees and tables of contents
Multi-level navigation
- Up to three levels. Deeper structures need search or a different information architecture.
- Each level indents 24px with a 1px guide line; branches collapse with a chevron that rotates 90°.
- The current page is tinted with the action colour and marked
aria-current; its ancestors stay open. - Arrow keys move and expand (
role="tree"for app trees; nested lists with<details>for document navigation). - In-page tables of contents highlight the section in view (scroll spy), as on this site.
Menus
Action menus
- Open from a button with a visible chevron or a “more” icon; close on Esc, outside click or selection.
- Group related items with a separator and an optional label; destructive items at the end, in red.
- Show keyboard shortcuts at the trailing edge in ⌘K style.
- Items are 36px high (44px on touch), 14.5px text, optional 18px icon.
App navigation and the burger
| Viewport | Primary navigation |
|---|---|
| Desktop ≥ 1280px | Persistent sidebar (240–280px) or top bar; collapsible to icons (64px) with tooltips |
| Tablet 960–1279px | Collapsed icon rail, or top bar with fewer items |
| Mobile < 960px | Burger button opens a drawer from the leading edge; or a bottom tab bar (3–5 items) for apps used daily |
The burger button spec is on Buttons and actions. Never hide primary navigation behind a burger on desktop.
Command palette
⌘K for power users
- Every North product with more than ~10 destinations has a command palette on ⌘K / Ctrl+K and /.
- Results are grouped (Pages, Actions, People), show the shortcut, and run on Enter.
- Recent and suggested items appear before typing.
- Try it on this site.
Code
<div class="n-tabs" role="tablist">
<button class="n-tab" role="tab" aria-selected="true" aria-controls="p1">Overview</button>
<button class="n-tab" role="tab" aria-selected="false" aria-controls="p2">Agents</button>
</div>
<ol class="n-breadcrumb"><li><a href="/admiral">Admiral</a></li><li><span aria-current="page">Licences</span></li></ol>Dos and don'ts
Do
- Mark the current location visually and with aria-current.
- Use tabs for views of one object.
- Keep trees to three levels.
- Offer a command palette in large products.
Don't
- Use tabs as a step-by-step wizard.
- Wrap tabs onto two lines.
- Hide desktop navigation behind a burger.
- Mix tab styles in one view.
Last updated on 14 October 2026