skills.rest
andersoncollab
andersoncollabCOMMUNITY
Explore all skills by this author →
GitHub

navigation-patterns

Define responsive navigation architectures with ARIA, keyboard, and focus management.

Updated Aug 27, 2026
Search Tags:#accessibility#keyboard navigation#navigation#breadcrumbs#aria#command palette#responsive ui
One-click install
npx skills add https://github.com/andersoncollab/design-agent --skill navigation-patterns-andersoncollab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: navigation-patterns
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/navigation-patterns
Command: npx skills add https://github.com/andersoncollab/design-agent --skill navigation-patterns-andersoncollab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you choose and implement correct navigation patterns so users can find what they need quickly, with responsive behavior and strong accessibility for keyboard and screen reader users.

Core Features & Use Cases

  • Responsive navigation architecture: Top navbars, mobile bottom tabs, and collapsible sidebars tailored to desktop vs. mobile constraints (thumb zones and drawer behavior).
  • Accessible interaction design: ARIA roles/attributes, focus management, focus traps, Escape-to-close behavior, and semantic HTML structure for menus and dialogs.
  • Wayfinding and control patterns: Breadcrumbs for hierarchy, command palettes (Cmd+K / Ctrl+K), and guidance for when to use mega menus and tab interfaces.

Quick Start

Use the navigation-patterns skill to generate an accessible navigation plan and component structure for a product app with a sidebar on desktop and bottom tabs on mobile.

Frequently Asked Questions about navigation-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design accessible navigation that works across desktop and mobile devices?▼

Accessible responsive navigation uses semantic HTML, ARIA roles, and focus management to let users locate pages efficiently across devices. It pairs desktop collapsible sidebars and top navbars with mobile bottom tab bars, ensuring keyboard and screen reader access.

What's the best way to implement keyboard navigation and focus traps for web menus?▼

Keyboard navigation for menus and dialogs requires visible focus management, ARIA attributes, and Escape-to-close behavior. Focus traps keep user input contained within open drawers or command palettes until explicitly dismissed.

When should I use breadcrumbs versus a command palette in my app's navigation architecture?▼

Breadcrumbs provide hierarchical wayfinding for nested page structures, while command palettes (Cmd+K / Ctrl+K) enable fast action execution and page location. Use breadcrumbs for deep content structures and command palettes for power user efficiency.

Does this responsive navigation approach support mobile bottom tab bars and collapsible sidebars?▼

Responsive navigation architecture explicitly supports mobile bottom tab bars optimized for thumb zones and desktop collapsible sidebars. It adapts top navbars with responsive drawers to ensure efficient page location across varying screen sizes.

What ARIA attributes and semantic HTML structure do I need for accessible navigation menus?▼

Accessible navigation menus require semantic HTML structure combined with ARIA roles and attributes for proper screen reader announcement. Focus management and keyboard navigation ensure users can interact with menu items without a mouse.

How do I build a command palette with Cmd+K shortcut behavior and focus management?▼

Command palettes use Cmd+K or Ctrl+K shortcuts to open a dialog with list interactions, requiring ARIA attributes, focus traps, and Escape-to-close behavior. Semantic HTML ensures screen readers announce search results and actions correctly.

Related Skills

Explore More Design & Creative Skills→
calcosmiccalcosmic
9

html-css

Enforce semantic HTML, ARIA, color contrast, and flat CSS architecture.

Community
Intermediate
HieubkavHieubkav

Frontend Responsive

Implement responsive mobile-first layouts with fluid containers, breakpoints, and touch targets.

Community
Basic
ConradmakerConradmaker

ds-ui-patterns

Standardize web UI layout decisions for page structure and surface composition.

Community
Intermediate
inbharataiinbharatai
22

wireframe-builder

Generate low-fidelity wireframes and user-flow diagrams with interaction annotations.

Community
Basic