VOL. III · CH. 3.1 · COMPONENT
Navigation Systems
The map a user builds of the whole product before they've used any of it.
1 min read · 117 words
3.1.1Definition & Anatomy
Primary navigation exposes a product's top-level structure — the main sections a user can move between. Anatomy: logo/home anchor, primary links, an active-state indicator, and (on mobile) a collapsed trigger.
3.1.2Common Mistakes
- Burying core destinations more than one click deep.
- No visible indication of which section the user is currently in.
- Inconsistent ordering between desktop and mobile navigation.
3.1.3Best Practices
- Limit primary items to what a user can scan in under two seconds — typically 5–7 max.
- Keep the active-state indicator visually unambiguous, not just a subtle color shift.
ExampleStripe's docs navigation keeps top-level categories to a handful, pushing depth into a secondary sidebar rather than crowding the primary bar.