Parts that must work together
A pattern is not a screenshot. It is a reusable decision model that must preserve intent, state, recovery, and accessibility as layouts change.
Decision framework
Questions to answer before choosing UI
What level is changing?
Separate movement between products, primary destinations, local sections, and steps. Each level needs a stable visual and semantic model.
What must remain visible?
Preserve current location and the routes needed to complete or safely leave the task. Lower-priority destinations can move into disclosure.
How does the platform navigate?
Touch stacks, desktop windows, browser history, sidebars, tab bars, and remote focus have different expectations. Adapt the structure, not only the styling.
End-to-end accessibility
- Use labeled navigation landmarks
- Expose the current page or step
- Keep focus order aligned with reading order
- Provide a skip route around repeated navigation
- Do not use disabled links as unexplained dead ends
Failure patterns to test
Mixing actions with destinations
Changing labels between breakpoints
Hiding all context inside a menu
Inventing navigation levels that do not match the content hierarchy