navigation-patterns
owl-listener/designer-skills
Select and design navigation patterns (tabs, drawer, hierarchy, hub) matched to your product structure and user tasks.
What is navigation-patterns?
Expert guidance for choosing and designing navigation systems that keep users oriented and able to move between sections predictably. Use this when deciding how to structure global, local, utility, and contextual navigation for your product.
- Evaluate navigation types: tab bars, drawers, hierarchies, breadcrumbs, and segmented controls for different contexts
- Match navigation patterns to platform (mobile, desktop, web) and information architecture
- Design active states and visual indicators that survive hover, focus, and disabled states
- Validate navigation labels with first-click testing before implementation
- Identify and avoid common mistakes like hamburger menus for primary desktop navigation
How to install navigation-patterns
npx skills add https://github.com/owl-listener/designer-skills --skill navigation-patternsHow to use navigation-patterns
- 1.Identify your product's primary destinations and count them (3–5 suggests tab bar; more suggests side navigation)
- 2.Determine your platform and context (mobile, desktop, web, app)
- 3.Select the appropriate navigation type from the provided patterns (global, local, utility, contextual)
- 4.Design active states and visual indicators for each navigation item
- 5.Validate your navigation labels with first-click testing before building
- 6.Test inter-section navigation with real user tasks to catch information architecture issues
Use cases
- Choosing between tab bar vs. side navigation for a new app based on number of destinations and platform
- Designing breadcrumbs and local sidebar navigation for a deep content hierarchy like documentation
- Structuring utility navigation (account, settings, notifications) separately from primary navigation
- Testing navigation labels with users to ensure they accurately describe destinations
- Validating that navigation structure remains consistent across all screens in a product
- Product designers planning information architecture and navigation flows
- UX designers building wireframes and prototypes
- Design systems teams establishing navigation component patterns
- Product managers deciding how to organize product sections and features
navigation-patterns FAQ
Use tab bars for mobile with 3–5 primary destinations; reserve hamburger menus for secondary navigation or screen-constrained contexts. Never use hamburger menus for primary navigation on desktop — it hides critical paths.
Limit to 7 or fewer. More than 7 creates choice paralysis; if you need more, revisit your information architecture before adding navigation items.
Active states must be distinguishable by more than color alone — use weight, underline, indicator bar, or other visual cues. The active state must survive default, hover, focus, disabled, and badge states.
Design navigation before individual screens. Navigation errors compound across the product, so validating structure early prevents costly rework.
Run first-click tests with users. Labels must accurately describe destinations and use language users recognize, not internal product names.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
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).
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
Related skills
More from owl-listener/designer-skills and the wider catalog.
north-star-vision
Define a compelling long-horizon product vision that aligns teams and anchors strategic decisions.
onboarding-design
Design first-run experiences that get users to value fast and build confidence.
opportunity-framework
Identify, score, and prioritize design opportunities against impact and effort.
pattern-library
Document reusable design patterns with problem context, solution, anatomy, and related patterns.
presentation-deck
Structure design presentations that persuade your specific audience and drive decisions.
prototype-strategy
Choose the right prototype fidelity and method to answer your design question efficiently.