Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Navigation Patterns & Routing Implementation · ancoleman | DecimalAI

ancoleman/implementing-navigation

NewSkillScoreMaintained

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.

Frontendby ancoleman

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/ancoleman-implementing-navigation/SKILL.md

decimalai skills pull ancoleman-implementing-navigation --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/ancoleman-implementing-navigation/SKILL.md https://app.decimal.ai/s/ancoleman-implementing-navigation/SKILL.md

Raw file: /s/ancoleman-implementing-navigation/SKILL.md ↗ · machine-readable summary at /s/ancoleman-implementing-navigation.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

24 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 8d ago

No — -100% lift+103% tokens0% turns83% of whole cases pass with skill (20/24)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-08	✓→✗	▼ Worse	67%	0%
case-02	✓→✓	＝ Same ✓	56%	0%
case-03	✓→✓	＝ Same ✓	80%	0%
case-05	✓→✓	＝ Same ✓	274%	0%
case-06	✓→✓	＝ Same ✓	104%	0%

Showing 5 of 24 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

ancoleman / ai-design-components

skills/implementing-navigation/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1Bundled 13 files · scripts

Skill contents

scripts/

references/

assets/

SKILL.md

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:

bash
# 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:

bash
# 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.

Want to see if ancoleman/implementing-navigation would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/21/2026, 12:35 UTC · 24 cases

Lift

-100%

0% vs 100%

Agent turns

1.0 vs 1.0

Tokens

+103%

3,126.46 vs 1,542.42

pass → pass · 20fail → fail · 3pass → fail · 1

Per-case results (24)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I am designing the main navigation structure for a SaaS platform with a 4-level nested administrative hierarchy (Settings > Team > Permissions > Roles). A designer suggested putting all 4 levels into a horizontal top navigation bar. Which primary navigation layout pattern should be chosen for this depth of information architecture?	fail→fail	13,191	12,470	-5%	1	1	0%	2,049	3,415	+67%	0	0	—
case-02 Our marketing team wants to put 12 primary navigation items in our main horizontal top header bar so every product feature is visible on the homepage. How many primary links should be placed in a top horizontal menu to avoid overwhelming cognitive load?	pass→pass	11,425	8,492	-26%	1	1	0%	1,780	2,770	+56%	0	0	—
case-03 For our mobile application, the design team wants to place 9 key navigation destinations into a fixed bottom navigation bar across all screens. How many primary actions should be included in a mobile bottom navigation bar?	pass→pass	10,420	8,819	-15%	1	1	0%	1,551	2,791	+80%	0	0	—
case-04 We are building an interactive 5-step user onboarding process where users must complete account creation, profile setup, interest selection, plan choosing, and payment in sequential order. A developer proposed using standard top tabs for switching between these steps. Which navigation pattern is appropriate for this process?	fail→fail	10,692	11,378	+6%	1	1	0%	1,673	3,245	+94%	0	0	—
case-05 We are building a React single-page application with nested layout routes. Which component from React Router should be rendered inside a parent layout component to display matching child route elements?	pass→pass	3,910	4,803	+23%	1	1	0%	627	2,346	+274%	0	0	—
case-06 In our React application, we are implementing a secondary tabbed view to switch between 'Overview', 'Analytics', and 'Logs' on a user profile page. The developer wants to control active tabs using pure local React state (`useState`). What key implementation requirement should be added to ensure users can share links directly to specific tabs?	pass→pass	7,794	7,439	-5%	1	1	0%	1,410	2,883	+104%	0	0	—
case-07 We are implementing custom keyboard navigation for a dropdown menu component. A developer bound the Tab key to close open dropdowns. Which standard keyboard key should trigger closing open dropdowns and overlay menus?	pass→pass	6,498	7,940	+22%	1	1	0%	997	2,900	+191%	0	0	—
case-08 Our design system team is defining focus styling for interactive navigation elements to meet WCAG 2.1 AA compliance. They proposed a subtle 1px border with a 1.5:1 contrast ratio against the background. What are the minimum requirements for visible focus indicator line width and contrast ratio?	pass→fail	10,328	9,190	-11%	1	1	0%	1,799	3,007	+67%	0	0	—
case-09 When implementing keyboard navigation for an ARIA menu component (`role='menu'`), a developer uses Tab and Shift+Tab to move focus between individual menu items inside the open menu. Which key interactions should be used to navigate between items inside an open menu?	pass→pass	7,935	6,854	-14%	1	1	0%	1,449	2,648	+83%	0	0	—
case-10 We have an admin table rendering 25,000 search results across paginated views. To prevent browser rendering lag when jumping between large page sizes or scrolling, what technical optimization should be applied to high-volume paginated list components?	pass→pass	14,828	14,515	-2%	1	1	0%	2,268	4,005	+77%	0	0	—
case-11 We are organizing a growing Python Flask web backend with dozens of endpoints across authentication, user management, and reporting. The team lead suggested defining all `@app.route` decorators in a single `app.py` file. Which Flask feature should be used to modularize route configurations into separate files?	pass→pass	5,015	6,276	+25%	1	1	0%	878	2,616	+198%	0	0	—
case-12 In a multi-module FastAPI application, a developer attached all path operations directly to the main `app = FastAPI()` instance inside `main.py`. Which FastAPI component should be used to split endpoints into modular, domain-specific route files?	pass→pass	2,928	4,231	+45%	1	1	0%	446	2,195	+392%	0	0	—
case-13 An e-commerce storefront sells thousands of items organized into 15 top departments, each containing 4 levels of categories, promo banners, and featured brands. The client suggested standard single-column dropdown lists on hover. Which navigation pattern is best suited for this e-commerce information structure?	pass→pass	14,319	13,606	-5%	1	1	0%	2,191	3,554	+62%	0	0	—
case-14 A site header contains 20 navigation links, requiring keyboard users to press Tab 20 times on every page load before reaching main article content. How should this be resolved for keyboard accessibility without moving header HTML elements?	pass→pass	12,217	13,471	+10%	1	1	0%	2,034	3,778	+86%	0	0	—
case-15 Power users of a complex SaaS application spend significant time drilling through 4 levels of side navigation menus to find specific tools, settings, and customer files. What navigation pattern allows power users to search and jump directly to actions or entities via keyboard input?	pass→pass	8,282	11,401	+38%	1	1	0%	1,261	3,618	+187%	0	0	—
case-16 On screen widths below 768px, our mobile web application needs to display a multi-level navigation tree containing 12 primary categories and submenus. The designer tried fitting all 12 links into a fixed bottom navigation bar. Which mobile navigation pattern should be used for this large slide-out menu structure?	pass→pass	12,009	14,015	+17%	1	1	0%	1,843	3,983	+116%	0	0	—
case-17 A developer implemented client-side route transitions using `onClick` event handlers on `<div>` tags in React. If JavaScript fails to load or is disabled in the client browser, navigation breaks completely. What design principle and HTML practice ensures navigation remains functional without client-side JavaScript?	pass→pass	12,571	5,401	-57%	1	1	0%	1,303	2,305	+77%	0	0	—
case-18 When a mobile navigation drawer overlay opens, keyboard focus is able to Tab past the drawer and interact with obscured links in the background page. What accessibility mechanism must be applied to lock focus inside open modal overlays?	pass→pass	7,368	10,705	+45%	1	1	0%	1,152	3,376	+193%	0	0	—
case-19 A large React single-page application bundle size reached 10MB because all route page components are imported synchronously at top level in the router file. How should route loading be optimized to reduce initial JS payload size?	pass→pass	12,875	11,975	-7%	1	1	0%	2,303	3,592	+56%	0	0	—
case-20 When building accessible navigation buttons (`<button>` or elements with `role='button'`), a developer implemented `Enter` key event handling for keyboard activation. Which additional standard key must activate interactive button elements?	pass→pass	3,277	4,253	+30%	1	1	0%	471	2,223	+372%	0	0	—
case-21 An online technical documentation portal displays 15,000-word single-page guides. Users find it difficult to navigate between sections within the long document. Which navigation pattern should be added to summarize and jump to sections within a long content page?	fail→fail	6,200	7,770	+25%	1	1	0%	952	2,788	+193%	0	0	—
case-22 I am designing a PostgreSQL database schema for storing arbitrary menu node hierarchies in a web app backend. Should I use an adjacency list model with `parent_id` or a closure table schema, and what are the trade-offs for deep tree queries?	pass→pass	20,810	27,537	+32%	1	1	0%	3,281	4,498	+37%	0	0	—
case-23 In a FastAPI Python backend, how do I write a dependency function that inspects the HTTP `Authorization` header, extracts the Bearer JWT token, and decodes it using `jwt.decode` with a secret key?	pass→pass	9,827	12,158	+24%	1	1	0%	1,906	3,787	+99%	0	0	—
case-24 How do I align an SVG icon and text vertically in the center inside a header element using CSS Flexbox layout properties?	pass→pass	7,638	7,203	-6%	1	1	0%	1,394	2,712	+95%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 24 cases were attempted. The headline lift of -100 percentage points is the difference between those two pass rates over the 24 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 100%
Pass rate with the skill: 0%
Cases attempted: 24
Cases counted toward lift: 24
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/21/2026, 12:35 UTC

SkillScore blends 4 signalsno signals yet

BenchmarkRun a verified benchmark with positive lift

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+105% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

No signals yet — run a benchmark or collect evaluated traces to earn a score.

Verified on gemini-3.6-flash · re-tested 7 days ago

Other measured skills in the registry, with their headline benchmark lift.