skills.rest
Soborbo
SoborboCOMMUNITY
Explore all skills by this author →
GitHub

astro-navigation

Add mobile-first navigation with menus, breadcrumbs, and footer to Astro sites.

4|1|Updated Dec 21, 2025
Search Tags:#accessibility#UX#navigation#Astro#breadcrumbs#header#mobile-menu
One-click install
npx skills add https://github.com/Soborbo/claudeskills --skill astro-navigation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-navigation
Source: https://github.com/Soborbo/claudeskills/tree/main/astro-navigation
Command: npx skills add https://github.com/Soborbo/claudeskills --skill astro-navigation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Navigation implementation across Astro sites often lacks consistency, accessibility, and responsive behavior, leading to poor UX and conversion drops.

Core Features & Use Cases

  • Header with logo, desktop nav, phone CTA, and primary CTA
  • Mobile Menu overlay: slide-in, keyboard accessible, Escape close, backdrop click, body scroll lock
  • Footer with structured columns and support for sticky mobile bar
  • Breadcrumbs with Schema.org markup and skip links for keyboard users
  • Active state indication and aria-current for current page

Quick Start

Use the astro-navigation skill to implement a mobile-first header, sticky footer, breadcrumbs, and skip links across your Astro site.

Frequently Asked Questions about astro-navigation

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

FAQPage Schema
How do I build an accessible mobile navigation menu in Astro?▼

To build accessible mobile navigation in Astro, implement a slide-in overlay menu with keyboard navigability, Escape key closing, backdrop click detection, and body scroll lock to ensure responsive, usable navigation across devices.

What is the best way to add breadcrumbs with Schema.org markup in Astro?▼

The best way to add breadcrumbs in Astro is to implement them with Schema.org markup alongside skip links for keyboard users. This approach improves site UX, accessibility, and search engine understanding of your site structure.

Does this Astro navigation approach support active state indication for current pages?▼

Yes, this Astro navigation approach supports active state indication by applying aria-current attributes to the current page. This semantic landmark enforcement meets accessibility standards and improves orientation for assistive technology users.

How do I implement skip links and semantic landmarks for Astro site accessibility?▼

To implement skip links and semantic landmarks in Astro, enforce ARIA attributes and semantic HTML structures across your header, mobile menu, and breadcrumbs. This guarantees keyboard navigability and meets strict usability standards.

Can I use this navigation system for lead-generation sites requiring a phone CTA?▼

Yes, you can use this navigation system for lead-generation sites because it includes a header layout supporting a phone CTA and primary CTA. This structured approach improves UX and helps increase conversion rates.

Related Skills

Explore More Design & Creative Skills→
JP-CanoJP-Cano

astro

Create Astro components, configure static site generation, and manage content collections.

Official
Intermediate
raybargasraybargas

Frontend Accessibility

Enforce frontend accessibility compliance in web UI code.

Community
Basic
therealityreporttherealityreport

extract-navigation

Extract navigation chrome from HTML into a structured NavigationData.

Community
Intermediate
shahatashahata

wix-headless

Guide building Wix Headless websites with Astro from setup to deployment.

Community
Advanced