Product UI / Patterns
App shell
A persistent frame that separates product-level navigation from the work inside each area.
published
The app shell owns orientation, not page-specific work. It makes the current product area and the available contextual destinations legible at every viewport width.
On small screens, primary and contextual navigation join in one accessible sheet while keeping their labels and order.
Navigation contract
Every destination belongs to one scope.
- Primary
- Moves between stable product areas. Example: Patterns, Components, Foundations
- Contextual
- Moves within the selected area. Example: App shell, Page header
- Local
- Holds actions that affect only the current page. Example: Create, export, filter
Keep scopes distinct
Do
- Keep the primary navigation stable across a product.
- Place feature destinations in contextual navigation.
- Keep commands in the page header or page content.
Avoid
- Duplicate a destination across primary and contextual navigation.
- Use the shell to host filters or actions that only affect one page.