Patterns
Navigation
Navigation patterns for product areas, sections and depth, and how navigation adapts from phones to desktops on each platform.
Navigation tells people where they are and where they can go. Stance supplies navigation primitives; each product decides its own structure.
Levels
- Product areas (three to seven destinations): a sidebar on the web, a tab bar on iPhone, a navigation bar on Android phones.
- Sections within an area: tabs.
- Depth: breadcrumbs on the web, the back stack on mobile.
- Jumping anywhere: a command palette on the web, search on mobile.
Adapting to screen size
| Part | Web | iOS and iPadOS | Android |
|---|---|---|---|
| Compact | TabBar or a drawer | StanceAdaptiveNavigation (tab bar) | StanceNavigationBar |
| Medium | Collapsed sidebar | Sidebar that can hide | StanceNavigationRail |
| Expanded | Sidebar | StanceAdaptiveNavigation (sidebar) | StanceNavigationDrawer |
| Automatic switching | CSS breakpoints | Size classes | StanceAdaptiveNavigation |
Rules
- Mark the current destination (
aria-currenton the web; selected state on native). - Keep destinations in the same order on every screen size.
- Icons need labels. An icon-only bar is acceptable only when collapsed and with tooltips or accessibility labels.
- On Android, support the system back gesture and predictive back. On iOS, never replace the system back button or the edge swipe.