# Implementing Navigation

Implements navigation patterns and routing for both frontend (React/TS) and backend...

- Repository: https://github.com/ancoleman/ai-design-components (526 stars)
- Category: Design
- License: MIT
- Last updated: 2025-12-11
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add ancoleman/ai-design-components --skill implementing-navigation -g -a claude-code -y`
Codex: `npx skills add ancoleman/ai-design-components --skill implementing-navigation -g -a codex -y`
Cursor: `npx skills add ancoleman/ai-design-components --skill implementing-navigation -g -a cursor -y`
Gemini CLI: `npx skills add ancoleman/ai-design-components --skill implementing-navigation -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add ancoleman/ai-design-components`

## Description

Implements navigation patterns and routing for both frontend (React/TS) and backend (Python) including menus, tabs, breadcrumbs, client-side routing, and server-side route configuration. Use when building navigation systems or setting up routing.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/ancoleman/ai-design-components/blob/HEAD/skills/implementing-navigation/SKILL.md