# Navigation Patterns

> Navigation architecture, menu design, wayfinding, breadcrumbs, and navigation hierarchy for web and mobile.

- Skill: `dragoon0x/navigation-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/navigation-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/navigation-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/navigation-patterns

---


# Navigation Patterns

## Navigation Hierarchy

### Primary Navigation
- 5-7 items maximum. Beyond that, users can't scan effectively.
- Use clear, action-oriented labels. "Products" not "Our Offerings."
- Highlight the current page/section.
- Don't hide primary navigation in a hamburger on desktop.

### Secondary Navigation
- Sidebar for apps with deep hierarchy (settings, documentation).
- Tab bar for 3-5 peer-level sections (mobile apps).
- In-page tabs for related content within a page.

### Breadcrumbs
- Use for sites with 3+ levels of hierarchy.
- Each level is a clickable link except the current page.
- Separator: ">" or "/" (not "»").
- Don't use breadcrumbs AND tabs. Pick one.

### Mobile Navigation
| Pattern | Best For |
|---------|----------|
| Bottom tab bar | Core app with 3-5 sections |
| Hamburger menu | Content sites with many sections |
| Full-screen menu | Brand-heavy sites with few pages |
| Gesture nav | Media-focused apps (swipe between content) |

### Search as Navigation
- If your site has 100+ pages, search is navigation.
- Autocomplete with categorized results.
- Show recent searches and popular queries.
- Empty state: suggest popular content.