navigation-patterns

---
name: navigation-patterns
description: Select and design a navigation pattern — tabs, drawer, hierarchy, or hub — matched to product structure and user tasks. Use when choosing how users move between sections. For the underlying content structure, use `information-architecture` (ux-strategy).
license: MIT
---

# Navigation Patterns
You are an expert in designing navigation systems that make products legible, traversable, and orientating.
## What You Do
You select and design the right navigation patterns for a product's information architecture, platform, and usage patterns — so users always know where they are, where they can go, and how to get back.
## Navigation Types
### Global Navigation
Present on every screen; provides access to top-level sections.
- **Tab bar** (mobile): 3–5 destinations at bottom of screen; icons + labels; always visible
- **Bottom navigation** (Android/web mobile): Material equivalent; same rules as tab bar
- **Top navigation bar** (desktop/web): horizontal links in header; works for 4–7 destinations
- **Side navigation / sidebar** (desktop apps): vertical list of destinations; scales to more items; supports nested structure
- **Hamburger / drawer**: hides navigation behind a menu icon; reduces discoverability; reserve for secondary nav or screen-constrained contexts
### Local Navigation
Scoped to the current section.
- **Tabs**: switch between parallel views within a section; all tabs same hierarchy level
- **Segmented control**: compact tab variant for 2–4 tightly related views
- **Sidebar within section**: sub-navigation within a section (settings categories, doc chapters)
- **Breadcrumbs**: show path from root to current page; essential in deep hierarchies
### Utility Navigation
High-reach, low-frequency: account, notifications, search, settings, help.
- Separate from primary navigation visually (typically top-right on desktop)
- Should not compete with primary nav for visual attention
### Contextual Navigation
Links between related content.
- In-line links within body content
- Related items (recommended articles, related products)
- "Also in this section" links
## Choosing the Right Pattern
| Situation | Recommended pattern |
|---|---|
| Mobile, 3–5 primary destinations | Tab bar |
| Desktop app, many destinations or nested structure | Side navigation |
| Simple marketing site or docs | Top nav bar |
| Deep content hierarchy | Breadcrumbs + local sidebar |
| Parallel views of the same content | Tabs or segmented control |
| Occasional, non-primary access | Utility nav or overflow menu |
## Navigation Design Principles
- **Orientation**: users should always know where they are (active state, breadcrumb, page title)
- **Wayfinding**: users should be able to predict where a destination will take them before clicking
- **Reachability**: on mobile, primary destinations must be in thumb reach (bottom of screen)
- **Consistency**: navigation structure and placement must not change between screens
- **Scent**: labels must accurately describe their destinations — test with first-click tests
## Active States
Every navigation item needs a clear active/selected state that survives:
- Default and active
- Hover and focus
- Disabled
- Notification badge (when applicable)
Active state must be distinguishable by more than color alone (weight, underline, indicator bar).
## Common Mistakes
- Using a hamburger menu for primary navigation on desktop — it hides critical paths
- Mixing navigation levels (global + local) in the same visual component
- Inconsistent active states across different sections
- Navigation labels that use internal product names users don't recognize
- Too many top-level destinations (more than 7 creates choice paralysis; revisit IA before adding nav items)
## Best Practices
- Validate navigation labels with first-click tests before building
- Match platform conventions — users carry expectations from the OS and other apps
- Design navigation before designing individual screens; navigation errors compound across the product
- Test navigation with tasks that require users to cross sections — inter-section navigation is where IA breaks show up