Navigation is the highest-traffic UI in any product, and the most platform-specific. The right pattern depends on platform conventions (iOS uses tab bars; web SaaS uses left rails; mobile commerce uses bottom sheets) and on how often users move between sections.
Study these references when designing a product whose navigation density is going to grow — they each anticipate scale that the cheap implementation doesn't.
- 01Three to five top-level destinations is the sweet spot for a tab bar; more belongs in an overflow.
- 02Active-state visual is unambiguous from any glance distance.
- 03Badging supports counts, dots, and exclamation marks with documented thresholds.
- 04Keyboard navigation order matches the visual order, with skip-to-content links on web.
- 05Mobile and desktop variants share semantic structure even when visual presentation differs.
- 01Top-level destinations grow from four to nine over two years and the nav becomes a Where's-Waldo.
- 02Active state relies on color alone; users with low vision or in bright light can't see it.
- 03Mobile and desktop treat navigation as separate problems and the IA drifts.
Apple Human Interface Guidelines
Apple
Tab Bar
The reference root navigation for iOS — three to five top-level destinations, badge support, large-content viewer for accessibility.
Atlassian Design System
Atlassian
Side Navigation
Multi-product navigation across the Atlassian suite, with explicit IA for nested workspaces and switcher patterns.
BBC GEL
BBC
Navigation (Orbit)
BBC's global header/navigation component with branded affordances and cross-platform consistency from web to TV.
Gestalt
Module (filter rail)
Composable disclosure container used for filter rails and side panels in image-discovery surfaces.