implementing-navigation

Use semantic nav elements with aria-label, NavLink for active states with aria-current, and roving tabindex for keyboard arrow-key navigation. The skill provides menu, tab, and breadcrumb patterns following WCAG 2.1 AA with focus trap handling for dropdowns.

React Router v6 suits single-page apps with data loaders, actions, and nested routes via createBrowserRouter. Next.js App Router provides file-based routing with server components, parallel routes, and intercepting routes for modal patterns.

Create Blueprint objects per feature module, define routes with @bp.route decorators, then register them in the app factory with register_blueprint. This keeps route files modular and supports URL prefixes and API versioning.

Yes, it covers hamburger drawers, bottom navigation bars, and scrollable tab bars with 44px minimum touch targets. Responsive patterns use media queries and useMediaQuery hooks to switch between desktop and mobile navigation.

Dropdowns need aria-expanded, aria-controls, and arrow-key handlers with roving tabindex to move focus between items. Missing Escape key handling or focus traps in modals are common causes of broken keyboard flows.

Use useSearchParams in React Router or Next.js to read and write the active tab as a query parameter. This makes tab states bookmarkable and shareable instead of relying on local component state alone.