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