Variant 01
Links
The small, reusable destination primitive used by both navigation panels.
View content
Components / wayfinding
Navigation
Navigation orients people across a product with persistent context, focused movement, and clear current-page signals.
How it's used?
A pattern with a job to do.
Use top navigation for product-level movement and side navigation for a focused workspace. Use links for individual destinations, then add tabs, breadcrumbs, or pagination when people need context within a deeper task.
02 / examples
See the component in context.
Variant 02
Top navigation
Product-level movement with brand context and primary destinations.
View content
Variant 03
Side navigation
Workspace-level movement that keeps the current section visible.
View content
Variant 04
Tabs and breadcrumbs
Local context for peer views and deeper hierarchy.
View content
Overview content.
03 / contract
Component contract
- Navigation landmarks have distinct aria-label values.
- NavigationLink variants include default, current, muted, and inverse.
- Top navigation handles product-level movement; side navigation handles workspace movement.
- Tabs use a roving tabindex keyboard model with Arrow, Home, and End keys.
04 / accessibility
Accessibility information
- Use native nav landmarks for navigation groups.
- Do not rely on color alone to show the current page.
- Top and side navigation use clear, distinct aria-label values.
- Disclosure menus return focus to their trigger on Escape.