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