Navigation Design
The design of the system that allows users to move between sections of a product.
Plain English
Navigation is the skeleton of the product — when it works well, users never think about it; when it fails, everything else breaks. The principles: show users where they are (active state), show them where they can go (clear labels), make the most-used destinations most accessible, and adapt the pattern to the device (top bar on desktop, bottom bar on mobile). The biggest mistake is overloading navigation with every possible destination rather than organising by frequency and importance.
Technical
Main navigation patterns: top navigation bar (horizontal, best for 4-7 items, good for marketing sites), sidebar navigation (vertical, best for 6-15+ destinations, good for web apps), bottom navigation bar (mobile, 3-5 destinations, within thumb reach), mega menu (large product families), and breadcrumb (supplemental, shows hierarchy). Active states: mark the current page with accent colour + font weight change. Use <nav> element with aria-label for accessibility. Keyboard: all nav items reachable via Tab key.
Live Demo
Navigation Patterns
1. Top nav — desktop
2. Side nav — complex apps
3. Bottom nav — mobile
Top nav for desktop. Bottom nav for mobile. Side nav for complex apps with deep hierarchies.
Usage
✓ Good usage
A top nav with 5 clearly labelled items, the current page highlighted with the accent colour and bold weight, and a sticky "Sign up" CTA on the right.
✗ Bad usage
A navigation bar with 12 items of equal visual weight — users cannot quickly find what they need and have no sense of priority.
Recommended values
- Top bar: max 6-7 items, 64px height
- Sidebar: 240px width, sticky or fixed
- Bottom mobile nav: 3-5 items, 56px height, icon + label
- Active state: accent colour + 500-600 font weight
- All nav items: minimum 44px touch target on mobile
Common mistakes
- No active state indicator — users cannot tell which page they are on.
- Navigation items that look like buttons or vice versa.
- Mobile navigation that relies on hover for submenus — hover does not exist on touch.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Top navigation: max 6 items, 64px height, left logo, right CTA button. Active state: accent colour text + medium weight. On mobile (< 768px): hide top nav, show sticky bottom nav with 4 icon + label items at 56px height. All items 44px minimum touch target.