navigation-patterns
Select and design navigation patterns that match product structure, user tasks, and platform conventions.
npx skills add Owl-Listener/designer-skills --skill navigation-patterns --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 tig
- What You Do
- Navigation Types
- Global Navigation
- Local Navigation
- Utility Navigation
- Contextual Navigation
- Choosing the Right Pattern
- Navigation Design Principles
- Active States
- Common Mistakes
- Best Practices
What does the navigation-patterns skill do?
Select and design navigation patterns that match product structure, user tasks, and platform conventions.
How do I install it?
Run `npx skills add Owl-Listener/designer-skills --skill navigation-patterns --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Owl-Listener/designer-skills, a repository with 1,964 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.