viktorbezdek 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