implementing-navigationlisted

# 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