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.
- Three to five top-level destinations is the sweet spot for a tab bar; more belongs in an overflow.
- Active-state visual is unambiguous from any glance distance.
- Badging supports counts, dots, and exclamation marks with documented thresholds.
- Keyboard navigation order matches the visual order, with skip-to-content links on web.
- Mobile and desktop variants share semantic structure even when visual presentation differs.
- Top-level destinations grow from four to nine over two years and the nav becomes a Where's-Waldo.
- Active state relies on color alone; users with low vision or in bright light can't see it.
- Mobile and desktop treat navigation as separate problems and the IA drifts.
Studied here
Apple Human Interface Guidelines
Tab Bar
The reference root navigation for iOS — three to five top-level destinations, badge support, large-content viewer for accessibility.
Atlassian Design System
Side Navigation
Multi-product navigation across the Atlassian suite, with explicit IA for nested workspaces and switcher patterns.
BBC GEL
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.