What it must accomplish
Translate product structure into predictable choices and a stable sense of place.
Usage
Choose the control by behavior
- People need to move between destinations or hierarchy levels
- A product has repeatable primary or contextual destinations
- The current location can be represented clearly
- The control performs an action
- A short local choice is better represented by tabs or a segmented control
- More destinations are being exposed than the user’s task requires
Anatomy
Stable parts create a reliable contract
- 1Container or landmark
- 2Destination link
- 3Current-location indicator
- 4Hierarchy or grouping
- 5Overflow or disclosure
- 6Optional utility actions
Interaction and keyboard behavior
- Links follow native Tab and Enter behavior
- Disclosure buttons announce expanded state
- Focus order follows the visible and reading order
- Skip links bypass repeated navigation
Visual similarity does not guarantee behavioral equivalence. The component contract must preserve state, focus, semantics, and recovery across input methods.
Accessible behavior
- Use navigation landmarks with useful labels when several exist
- Mark the current page or step programmatically
- Keep link text meaningful out of context
- Do not rely on position or color alone
Responsive considerations
Adapt the decision—not only the dimensions
Re-prioritize by task instead of simply hiding desktop navigation. Preserve the current location, key actions, and a predictable way to reach lower-priority destinations.
Content considerations
Language is part of the component
- Use stable nouns for destinations
- Match labels to page headings
- Avoid clever terminology
- Keep grouping mutually understandable
Patterns that weaken the experience
Mixing actions and destinations without distinction
Changing labels across breakpoints
Using a hamburger menu without a visible location cue
Creating multiple competing primary navigation systems
Comparison
What to study across systems
Apple’s platform-specific models show why one navigation pattern cannot be copied everywhere; Fiori emphasizes shells and floorplans; GOV.UK favors task-oriented service journeys and explicit wayfinding.
Open comparison