Patterns / Navigation
App shell
A persistent frame that separates product-level navigation from the work available inside each area.
Core pattern
Navigation contract
Every destination belongs to one scope. The shell stays predictable because those scopes do not compete for the same link.
- Primary
- Top bar
- Moves between stable product areas. Example: Patterns, Components, Foundations
- Contextual
- Sidebar
- Moves within the selected area. Example: App shell, Page header
- Local
- Page header
- Holds actions that affect only the current page. Example: Create, export, filter
One model at every width
Desktop keeps contextual navigation visible. Mobile combines both scopes in one accessible sheet while preserving their labels and order.
The page owns its title and actions. The shell owns orientation. Product content owns everything else.