Design System · 17 of 25
Navigation
Headers, sidebars, tabs, breadcrumbs and more.
Navigation philosophy
Navigation should be predictable and accessible.
Navigation patterns should follow user expectations. Global navigation (headers, sidebars) helps users move between major sections. Local navigation (breadcrumbs, tabs) helps them move within a section. Mobile navigation should be touch-friendly and progressive. The key principle: never make users guess where they are or how to get where they want to go.
Rules
Always indicate the current location.
Make visited links distinguishable.
Use clear and concise labels.
Never hide navigation behind hover on desktop.
Provide keyboard access to all navigation items.
The full hierarchy of navigation components from atoms to pages.
Navigation atoms
The smallest navigation building blocks.
Navigation atoms are the fundamental HTML elements and UI primitives that make up navigation: buttons, links, icons, and badges. Each atom ships with every state and styles from design tokens. See <a href="/design-system/atomic-design#atoms">Atomic design → Atoms</a> for the canonical atom definition.
Examples
Icon button, text button, ghost button
Link, external link, nav link
Hamburger menu icon, close icon
Badge, pill, tag
Rules
Provide visible focus indicators.
Basic building blocks: buttons, links, icons, badges.
Navigation molecules
Small groups of atoms that form useful navigation patterns.
Navigation molecules combine atoms into purposeful groups. A button and icon become a menu trigger. A link and separator become a nav divider. An input and button become a search form. See <a href="/design-system/atomic-design#molecules">Atomic design → Molecules</a> for the canonical molecule definition.
Examples
Menu trigger (button + hamburger icon)
Search form (input + button)
Nav divider (link + horizontal rule)
Tab (label + indicator)
Rules
Link labels and hints with appropriate ARIA attributes.
Groups of atoms that form useful navigation patterns.
Navigation organisms
Larger navigation regions made of molecules and atoms.
Navigation organisms are distinct interface regions: a horizontal navbar, a vertical sidebar, a breadcrumb trail, a tab bar. They can hold state and accept data through props, but their visual building blocks all come from lower levels. See <a href="/design-system/atomic-design#organisms">Atomic design → Organisms</a> for the canonical organism definition.
Examples
Horizontal top navigation bar
Vertical sidebar with sub-navigation
Breadcrumb trail (Home > Products > Widgets)
Tabbed interface (3-5 tabs)
Rules
Handle open, closed and selected states explicitly.
Distinct regions of navigation built from lower-level components.
Navigation templates
Page-level layouts that place navigation organisms and show the structure.
A navigation template defines where navigation goes: a header on top with a logo and global nav, a sidebar on the left with section nav, a bottom bar with utility links. It deals with grid, spacing and responsive behaviour. See <a href="/design-system/atomic-design#templates">Atomic design → Templates</a> for the canonical template definition.
Examples
Header template (logo + global nav + actions)
Sidebar template (section nav + subnav + actions)
Footer template (utility links + copyright)
Rules
Define behaviour at each breakpoint.
Page-level layouts that define structure without specific content.
Navigation pages
Templates filled with real navigation content. The level where you test whether the system holds up.
A page is a specific instance of a navigation template with real data and content. It is the final check: if a real page breaks the layout or the navigation does not work on a given screen size, the fix belongs in the template or organism, not in a one-off override. See <a href="/design-system/atomic-design#pages">Atomic design → Pages</a> for the canonical page definition.
Examples
The signed-in dashboard with a vertical sidebar and breadcrumb trail
A product page with a horizontal top nav and context-aware tabs
A checkout flow with a persistent mini-cart and checkout nav
Rules
Turn repeated navigation patterns into new organisms or templates.
Specific instances of templates with real content and navigation.
Responsive navigation
Navigation that works at every screen size.
Responsive navigation is not just "hide/show". It is a deliberate change in pattern based on screen size. Common patterns: horizontal top nav → hamburger menu → bottom navigation bar. The key is to orchestrate the transition so users never lose their place or have to re-learn where things are.
Examples
Desktop: horizontal navbar with 5 links
Tablet: hamburger menu reveals vertical list
Mobile: bottom navigation bar with 3-5 primary destinations
Rules
Choose one pattern per breakpoint, do not mix.
Animate the transition between patterns.
Test that focus order is preserved when nav is shown/hidden.
Ensure the current page is always indicated.
import { useEffect } from 'react';
export function useResponsiveNav(breakpoints: { md: number; lg: number }) {
const [mode, setMode] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');
useEffect(() => {
const updateMode = () => {
const width = window.innerWidth;
if (width >= breakpoints.lg) setMode('desktop');
else if (width >= breakpoints.md) setMode('tablet');
else setMode('mobile');
};
updateMode();
window.addEventListener('resize', updateMode);
return () => window.removeEventListener('resize', updateMode);
}, [breakpoints]);
return mode;
}
function TopNav({ mode }: { mode: 'desktop' | 'tablet' | 'mobile' }) {
if (mode === 'desktop') return <nav>...</nav>;
if (mode === 'tablet') return <HamburgerMenu />;
return <BottomNav />;
}
export function ResponsiveNav() {
const mode = useResponsiveNav({ md: 768, lg: 1024 });
return <TopNav mode={mode} />;
}Accessibility
Navigation must work for everyone.
Navigation is a primary way users explore your product. It must be operable via keyboard and screen reader friendly, and work in high contrast modes. All navigation items need focus indicators, meaningful link text, and appropriate ARIA labels for icons.
Rules
Every navigation item is keyboard-focusable (Tab order).
Focus indicator is visible in all themes and forced-colors mode.
Screen reader text for icon-only buttons (e.g. via aria-label).
Use
navelement for top-level navigation andul/olfor lists.Avoid complex dropdown patterns without proven accessible implementations.
<nav aria-label="Main navigation">
<ul role="menubar">
<li role="none">
<a role="menuitem" href="/">Home</a>
</li>
{/* ... more items ... */}
</ul>
</nav>
<button aria-haspopup="true" aria-expanded={isOpen} onClick={toggle}>
<MenuIcon aria-label="Open menu" />
</button>
<ul role="menu" hidden={!isOpen}>
{/* ... menu items ... */}
</ul>Practical guidelines
Tips for applying navigation patterns consistently.
Start with the simplest pattern that works. Add responsive breakpoints only when the label lengths or use cases demand it. Use the token system for colors and spacing. Test navigation with a keyboard, a screen reader, and on real devices at every breakpoint.
Do
Use focus indicators. Test with Keyboard Only™.
Don't
Do not hide navigation behind hover on desktop. Do not skip focus states.
Rules
Start simple. Make it responsive from the start.
Use semantic HTML first (<nav>, <ul>, <li>, <a>).
Test with keyboard only, then screen reader, then on real devices.
Checklist
Before shipping your navigation system.
Hierarchy
Global → local → contextual navigation follows a consistent structure.
Consistency
Atoms style from tokens. Molecules compose atoms. Organisms accept data via props.
Responsiveness
Nav works at every breakpoint. Transitions are animated. Current page is always indicated.
Accessibility
Keyboard operable. Screen reader friendly. Focus indicators visible in all modes.