Navigation design

Navigation Design

Create intuitive wayfinding systems for content and applications. Navigation design determines whether users find what they need or abandon in frustration. Good navigation is invisible; bad navigation is the #1 complaint on support channels.

When to Use

• Designing site-wide navigation (top nav, sidebar, footer)
• Planning a sitemap or information architecture
• Structuring sidebar menus for documentation
• Designing breadcrumb systems
• Organizing content hierarchy and categorization
• Evaluating whether current navigation is working (analytics, user feedback)

When NOT to Use

• Mapping user journeys across touchpoints over time (use user-journey-design)
• Writing navigation labels, microcopy, or button text (use ux-writing)
• Implementing Next.js routing, layouts, or parallel routes (use nextjs-development)
• Designing visual styling of navigation components (use frontend-design)

Decision Tree

What navigation problem are you solving?
│
├─ Structuring a new site/app
│  ├─ Broad, shallow content? → Flat IA + global nav
│  ├─ Deep, hierarchical content? → Tree IA + sidebar nav
│  ├─ Hub-and-spoke workflow? → Hub IA + contextual nav
│  └─ Multi-dimensional content? → Faceted IA + filter nav
│
├─ Improving existing navigation
│  ├─ Users can't find content? → Audit with 3-click rule + card sorting
│  ├─ Too many top-level items? → Consolidate to 7±2; use progressive disclosure
│  ├─ Users get lost in deep pages? → Add breadcrumbs + contextual nav
│  └─ Navigation inconsistent across pages? → Establish nav patterns + audit
│
├─ Choosing navigation type
│  ├─ Site-wide access needed? → Global nav (top bar, sidebar)
│  ├─ Section-specific links? → Local nav (sub-menu, tabs)
│  ├─ In-content references? → Contextual nav (related articles, see-also)
│  ├─ Tools/settings/access? → Utility nav (search, login, settings)
│  └─ Location orientation? → Breadcrumbs
│
└─ Navigation for specific platforms
   ├─ Documentation site? → Sidebar + search + breadcrumbs
   ├─ SaaS application? → Top nav + sidebar + command palette
   ├─ Marketing site? → Top nav + mega-menu + footer
   └─ Mobile app? → Bottom tab bar + hamburger for overflow

Navigation Types

Type	Use Case	Example
Global	Site-wide access	Top nav, sidebar
Local	Section-specific	Sub-menu
Contextual	In-content links	Related articles
Utility	Tools/settings	Search, login
Breadcrumb	Location trail	Home > Docs > API

Information Architecture Patterns

Hierarchy (Tree)

Home
├── Products
│   ├── Category A
│   └── Category B
├── Docs
│   ├── Getting Started
│   └── Reference
└── Support

Best for: Content with natural parent-child relationships. Most common pattern.

Hub and Spoke

Central hub with satellite pages, return to hub. Best for: Workflow-driven apps where users complete a task and return to a dashboard.

Flat

Few levels, broad categories. Best for: Small sites (<30 pages), single-product landing pages.

Faceted

Multiple classification dimensions (filter + sort). Best for: E-commerce, directories, content libraries where users browse by different attributes.

Navigation Rules

Rule	Description
7 +/- 2	Limit top-level items
3-click	Reach any page in 3 clicks
Recognition > Recall	Show options, don't require memory
Consistency	Same nav across pages
Progressive disclosure	Show relevant options at each level; hide deeper ones
Current location	Always indicate where the user is

Breadcrumb Template

Home > [Category] > [Subcategory] > Current Page

Clickable except current page. Use for any site deeper than 2 levels.

Sitemap Template

## Sitemap: [Product]

### Primary Navigation
1. Home
2. Features
   - Feature A
   - Feature B
3. Documentation
   - Quick Start
   - Tutorials
   - API Reference
4. Pricing

### Utility Navigation
- Search
- Login/Signup
- Help

Anti-Patterns

Anti-Pattern	Problem	Solution
Mystery meat navigation	Icons/labels that don't communicate destination	Use descriptive text labels; test with 5-second recognition test
Too many levels (deep nesting)	Users lose context; high abandonment	Flatten to max 3 levels; use hub-and-spoke for deep content
Inconsistent placement	Nav moves between pages, disorienting users	Lock navigation position; audit every page for consistency
Missing current location indicator	Users don't know where they are	Highlight active item; add breadcrumbs for deep pages
Mega-menu without grouping	50+ links in a dropdown overwhelms	Group into 3-5 categories with clear headings; use progressive disclosure
Navigation depends on hover	Touch devices and accessibility fail	All nav must work with click/tap; hover is enhancement only
Hidden navigation (hamburger everywhere)	Discoverability drops; users don't explore	Show top-level items visibly; use hamburger only for overflow on mobile
Orphan pages (no nav back)	Users land on a page with no way out	Every page must have at least: global nav + breadcrumb + link to parent
Inconsistent labeling	Same section called different things in different contexts	Create a naming glossary; use the same label everywhere
Search as only navigation	Users who don't know the right term can't find content	Search supplements navigation; never replaces it

Related Skills

• user-journey-design — Map how users flow through touchpoints over time (not spatial navigation)
• ux-writing — Write the labels, tooltips, and microcopy for navigation
• content-modelling — Define the content types that populate navigation structures
• nextjs-development — Implement Next.js routing, layouts, and parallel routes