# Navigation Design

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-viktorbezdek-skillstack-navigation-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [viktorbezdek](https://agentstack.voostack.com/s/viktorbezdek)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [viktorbezdek](https://github.com/viktorbezdek)
- **Source:** https://github.com/viktorbezdek/skillstack/tree/main/navigation-design/skills/navigation-design

## Install

```sh
agentstack add skill-viktorbezdek-skillstack-navigation-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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 ( 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

```markdown
## 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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [viktorbezdek](https://github.com/viktorbezdek)
- **Source:** [viktorbezdek/skillstack](https://github.com/viktorbezdek/skillstack)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-viktorbezdek-skillstack-navigation-design
- Seller: https://agentstack.voostack.com/s/viktorbezdek
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.