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 ( 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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: viktorbezdek
• Source: viktorbezdek/skillstack
• License: MIT

Install and usage instructions live in the source repository linked above.