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
• Essential for deep sites and e-commerce
• See references/navigation-components.md for breadcrumb patterns

Tabs

• Content switching without page reload
• URL synchronization for bookmarking
• See references/navigation-components.md for tab implementation

Pagination

• For search results, product lists, articles
• Consider virtualization for performance
• See references/navigation-components.md for pagination patterns

Client-Side Routing

React Router (Industry Standard)

• Type-safe routing with loader patterns
• Nested routes and lazy loading support
• See references/client-routing.md for React Router patterns

Next.js App Router

• File-based routing with RSC support
• Parallel and intercepting routes
• See references/client-routing.md for Next.js routing

Backend Routing Patterns

Python Web Frameworks

Flask

• Blueprint-based organization
• Route decorators and URL rules
• See references/flask-routing.md for Flask patterns

Django

• URL configuration with namespaces
• Path converters and regex patterns
• See references/django-urls.md for Django URL conf

FastAPI

• Router-based organization
• Path operations and dependencies
• See references/fastapi-routing.md for FastAPI routers

Mobile Navigation

Patterns for Touch Devices

Hamburger Menu

• Slide-out drawer for primary navigation
• See references/menu-patterns.md for mobile drawer

Bottom Navigation

• 3-5 primary actions, thumb-friendly
• See references/menu-patterns.md for bottom nav

Tab Bar

• Horizontal scrollable tabs with swipe
• Natural for mobile-first applications

Accessibility Requirements

Keyboard Navigation

Tab       → Move forward through links
Shift+Tab → Move backward through links
Enter     → Activate link/button
Space     → Activate button
Arrow keys → Navigate within menus
Escape    → Close dropdowns/modals

ARIA Patterns

Essential ARIA attributes for accessible navigation:

• See references/accessibility-navigation.md for complete ARIA patterns
• Includes landmark roles, states, and properties
• Screen reader optimization techniques

Focus Management

• Visible focus indicators (2px minimum, 3:1 contrast)
• Focus trap for modals and dropdowns
• Skip navigation link for keyboard users
• See references/accessibility-navigation.md for focus patterns

Implementation Utilities

Navigation Structure Management

Generate and validate navigation trees:

# Validate navigation structure
node scripts/validate_navigation_tree.js nav-config.json

# Generate breadcrumb trails
node scripts/calculate_breadcrumbs.js current-path

Route Generation (Python)

Generate route configurations:

# Generate Flask/Django/FastAPI routes
python scripts/generate_routes.py --framework flask --config routes.yaml

Code Examples

Frontend Examples

For working navigation implementations:

• examples/horizontal-menu.tsx - Responsive top navigation
• examples/tab-navigation.tsx - Tabs with URL sync
• examples/mobile-navigation.tsx - Hamburger and drawer

Backend Examples

For routing configuration:

• examples/flask_routes.py - Flask blueprint setup
• examples/django_urls.py - Django URL patterns
• examples/fastapi_routes.py - FastAPI router organization

Navigation Configuration

For complex navigation structures, use the configuration schema:

• assets/navigation-config-schema.json - Navigation tree schema
• assets/route-templates.json - Common route patterns

Validate configurations before implementation using the validation script.

Library Recommendations

Frontend Routing

React Router is the recommended solution for React applications:

• Industry standard with excellent TypeScript support
• Built-in accessibility with NavLink active states
• See references/library-comparison.md for alternatives

Component Libraries

For rapid development, consider:

• Headless UI libraries (Radix UI, React Aria)
• Accessible by default
• Work with any styling approach

Progressive Enhancement

Build navigation that works without JavaScript:

• Server-rendered HTML navigation
• Progressive enhancement with client-side routing
• Fallback for JavaScript failures

Performance Considerations

• Lazy load route components
• Prefetch navigation targets
• Use route-based code splitting
• Implement loading states for navigation

Testing Navigation

Essential navigation tests:

• Keyboard navigation flow
• Screen reader announcements
• Mobile touch interactions
• Route parameter validation
• Deep linking functionality

Next Steps

• Analyze the information architecture
• Select appropriate navigation pattern
• Implement with accessibility first
• Add progressive enhancement
• Test across devices and assistive technologies

For detailed implementation guides, explore the referenced documentation files based on specific requirements.