Skip to main content
Pricing

Navigation

Navigation patterns define how users move through your application. A clear, consistent navigation structure reduces confusion and helps users find what they need quickly. This pattern covers app shells, mobile adaptation, and deep linking.

Components used

Anatomy

1
App shell — Header (sticky top) + Sidebar (sticky left) + Main content area (scrollable centre)
2
Header — logo, primary nav links, search trigger, user menu (right-aligned)
3
Sidebar — grouped nav links with collapsible sections, active state indicator
4
Breadcrumbs — below the header, above page content, showing the current location
5
Footer nav — bottom of page with secondary links, legal, and support

Best practices

App shell

Header at the top (56px height, sticky). Sidebar on the left (240–280px, sticky, scrollable). Main content fills the remaining space. The sidebar is the primary navigation; the header provides global actions and branding.

Mobile adaptation

On mobile (below 1024px), collapse the sidebar into a hamburger overlay. Replace sidebar navigation with a Bottom Nav showing the 3–5 most important destinations. The Command Menu (⌘K) remains available via a search icon in the header.

Breadcrumbs

Show on all nested pages to provide location context. Format: Home > Section > Page. On mobile, truncate middle segments with an ellipsis or show only the parent. Always include a link back to the parent level.

Tabs vs Segmented Control

Use Tabs for switching between content panels (Overview, Activity, Settings). Use Segmented Control for switching views or display modes (Grid/List, Monthly/Annual). Tabs are for content; Segmented Control is for views.

Command Menu

⌘K (Ctrl+K on Windows) should always be available as a quick navigation shortcut. Group results by category: pages, components, actions, settings. Show recent items first. Filter as the user types.

Skip Link

Always include a Skip Link as the first focusable element on every page. It should be visible only on focus and link to #main-content. This is essential for keyboard users and required by WCAG 2.4.1 (Bypass Blocks).

Responsive behaviour

Sidebar collapses to hamburger overlay below 1024px.
Bottom Nav appears on mobile for primary destinations (3–5 items max).
Breadcrumbs truncate middle segments on mobile, showing only parent + current.
Tabs scroll horizontally on mobile with a fade indicator at the edges.
Header search becomes a full-screen overlay on mobile.

Accessibility

Use landmark roles: <header>, <nav>, <main>, <aside>, <footer> for clear page structure.
Skip Link must be the first focusable element — it allows keyboard users to bypass repeated navigation.
Active navigation items use aria-current="page" for screen reader context.
Sidebar collapsible groups use aria-expanded on the toggle button.
Command Menu follows the combobox pattern: role="combobox" with role="listbox" for results.
Bottom Nav items use aria-current="page" for the active destination.