Navigation Patterns

This skill covers navigation design — site architecture, breadcrumbs, tabs, sidebars, and user flow patterns that help users find content.

Use-When

This skill activates when:

• Agent builds navigation components
• Agent creates page hierarchies or breadcrumbs
• Agent designs tabs or tabbed interfaces
• Agent builds sidebars or menus
• Agent structures site or app navigation

Core Rules

• ALWAYS use semantic nav elements (nav, ul, li)
• ALWAYS indicate current page in navigation
• ALWAYS provide consistent navigation across pages
• ALWAYS include skip links for keyboard users
• PREFER breadcrumbs for deep hierarchies (3+ levels)

Common Agent Mistakes

• Using divs instead of semantic nav elements
• Not marking active/current page
• Inconsistent navigation between pages
• Missing mobile navigation patterns
• No way to navigate back (broken back button)

Examples

✅ Correct

<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products" aria-current="page">Products</a></li>
  </ul>
</nav>

// Breadcrumbs
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li aria-current="page">Widget</li>
  </ol>
</nav>

❌ Wrong

// Non-semantic
<div className="nav">
  <div>Home</div>
  <div>Products</div>
</div>

// No current indicator
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/products">Products</a></li>
</ul>

References

• Nielsen Norman Group – Navigation
• MDN – Navigation