skills.rest
coastdigitalgroup
coastdigitalgroupOFFICIAL
Explore all skills by this author →
GitHub

site-navigation-system

Design accessible website navigation systems with ARIA and keyboard support.

2|Updated Mar 21, 2026
Search Tags:#accessibility#navigation#responsive-design#breadcrumbs#ia#keyboard-accessibility#information-architecture
One-click install
npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill site-navigation-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: site-navigation-system
Source: https://github.com/coastdigitalgroup/coastai-skills/tree/main/website-design/site-navigation-system
Command: npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill site-navigation-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Site Navigation System addresses the challenge of creating structured, accessible, and intuitive navigation architectures that help users orient themselves and move between sections efficiently.

Core Features & Use Cases

  • Clear navigation maps for Header, Footer, and Sub-navigation to improve wayfinding.
  • Responsive patterns (desktop mega-menus, mobile drawers) that adapt across breakpoints.
  • Accessibility requirements including landmarks, ARIA attributes, skip links, and keyboard navigation.

Quick Start

Create a complete, accessible navigation IA for a mid-sized website.

Frequently Asked Questions about site-navigation-system

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

FAQPage Schema
How do I design an accessible website navigation system?▼

Accessible website navigation design requires semantic HTML structure, ARIA labeling, skip links, and keyboard accessibility to ensure screen reader compatibility and compliant user wayfinding across all site sections.

What is the best way to structure responsive navigation menus?▼

Responsive navigation adapts layouts across breakpoints using desktop mega-menus and mobile drawers, enforcing 44px touch targets and keyboard accessibility to maintain intuitive wayfinding on both mobile and desktop contexts.

How do I implement breadcrumbs for information architecture?▼

Implement breadcrumbs by mapping your information architecture to semantic navigation landmarks, ensuring structured wayfinding that helps users orient themselves and move efficiently between distinct website sections.

Does accessible navigation design require specific ARIA attributes?▼

Accessible navigation design requires ARIA attributes for proper semantic labeling, alongside skip links and keyboard navigation support, ensuring the website architecture complies with strict accessibility guidelines across all responsive breakpoints.

Can I use this approach to plan navigation for a mid-sized website?▼

You can create a complete navigation information architecture for a mid-sized website, defining clear header, footer, and sub-navigation maps that improve user orientation and structured wayfinding across all pages.

Related Skills

Explore More Design & Creative Skills→
bongrealtybongrealty
2

site-architecture

Design website page hierarchies, navigation systems, and URL patterns.

Community
Intermediate
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
VSF-QC-TTSVSF-QC-TTS

common-accessibility

Validate web UIs for WCAG 2.2 AA compliance with semantic HTML and ARIA.

Official
Intermediate
emilneuraz-aiemilneuraz-ai

wcag-audit-patterns

Identify and remediate WCAG 2.2 accessibility violations with automated checks and remediation guidance.

Community
Advanced