implementing-navigation

# Navigation Patterns & Routing Implementation

## Purpose

This skill provides comprehensive guidance for implementing navigation systems across both frontend and backend applications. It covers client-side navigation patterns (menus, tabs, breadcrumbs) and routing (React Router, Next.js) as well as server-side route configuration (Flask, Django, FastAPI).

## When to Use

Use this skill when:
- Building primary navigation (top, side, mega menus)
- Implementing secondary navigation (breadcrumbs, tabs, pagination)
- Setting up client-side routing (React Router, Next.js)
- Configuring server-side routes (Flask, Django, FastAPI)
- Creating mobile navigation patterns (hamburger, bottom nav)
- Implementing keyboard-accessible navigation
- Building command palettes or search-driven navigation
- Creating multi-step wizards or steppers
- Ensuring WCAG 2.1 AA compliance for navigation

## Navigation Decision Framework

```
Information Architecture → Navigation Pattern

Flat (1-2 levels)      → Top Navigation
Deep (3+ levels)       → Side Navigation
E-commerce/Large       → Mega Menu
Linear Process         → Stepper/Wizard
Long Content          → Table of Contents
Power Users           → Command Palette
Multi-section Page    → Tabs
Large Data Sets       → Pagination
```

## Frontend Navigation Components

### Primary Navigation Patterns

**Top Navigation (Horizontal)**
- Best for shallow hierarchies, marketing sites
- 5-7 primary links maximum for cognitive load
- See `references/menu-patterns.md` for implementation

**Side Navigation (Vertical)**
- Best for deep hierarchies, admin panels, dashboards
- Supports multi-level nesting and collapsible sections
- See `references/menu-patterns.md` for sidebar patterns

**Mega Menu**
- Best for e-commerce, content-heavy sites
- Rich content with images and descriptions
- See `references/menu-patterns.md` for mega menu structure

### Secondary Navigation Components

**Breadcrumbs**
- Shows hierarchical path and current location
- Ess