Claude-skill-registry astro-navigation

Navigation patterns for Astro sites. Header, footer, mobile menu, breadcrumbs, skip links. Use for all navigation implementation.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/astro-navigation" ~/.claude/skills/majiayu000-claude-skill-registry-astro-navigation && rm -rf "$T"

manifest: skills/data/astro-navigation/SKILL.md

Astro Navigation Skill

Purpose

Provides navigation patterns for lead generation sites. Mobile-first, accessible, conversion-focused. Implements header, footer, mobile menu, breadcrumbs, and skip links with proper keyboard navigation and screen reader support.

Core Rules

Mobile-first — Design for 375px, enhance for desktop
Phone prominent — Click-to-call in header on mobile
CTA visible — Primary CTA always accessible
Accessible — Keyboard navigable, screen reader friendly
Fast — No layout shift on menu toggle
Sticky elements — Header fixed top, mobile CTA bar fixed bottom
Active states — Indicate current page in navigation
Skip link — Allow keyboard users to skip to main content
Escape key — Close mobile menu with Escape
Safe areas — Account for iOS notch/safe areas

Navigation Components

Header

Sticky header with logo, desktop nav, phone, and CTA
Mobile menu button visible only on mobile
Logo always links to homepage
Phone number clickable with proper tel: link

Mobile Menu

Slide-in overlay from right
Backdrop closes menu on click
Escape key closes menu
Prevents body scroll when open
CTAs at bottom (Quote + Phone)

Footer

Four-column grid on desktop, stacked on mobile
Company info, services, areas, quick links
Bottom bar with copyright and legal links
Extra padding on mobile to clear sticky CTA bar

Breadcrumbs

Schema.org structured data
Current page indicated with aria-current
Proper semantic markup with ol/li

Skip Link

Hidden by default, visible on focus
Fixed position with high z-index
Jumps to #main-content

Active Link Styling

Checks current pathname
Applies aria-current="page"
Visual indicator (color + font weight)

Navigation Structure

Header (sticky top)
├── Logo (links to /)
├── Desktop Nav (hidden on mobile)
├── Desktop CTA (phone + button)
└── Mobile Menu Button (hidden on desktop)

Mobile Menu (overlay)
├── Close Button
├── Navigation Links
└── CTAs (Quote + Phone)

Footer (pb-24 on mobile, pb-12 on desktop)
├── Company Info
├── Services Links
├── Areas Links
├── Quick Links
└── Bottom Bar (copyright + legal)

Sticky Mobile CTA Bar (fixed bottom, mobile only)
├── Call Button
└── Quote Button

References

Implementation details in references directory:

Header — Desktop header with nav and mobile menu button
Mobile Menu — Slide-in menu with animation and script
Sticky CTA Bar — Fixed bottom bar for mobile
Footer — Four-column footer with extra mobile padding
Breadcrumbs — Schema.org breadcrumb navigation
Skip Link — Accessibility skip-to-content link
Active Link Styling — Current page indication

Key Patterns

Mobile Menu Animation:

Hidden with
```
translate-x-full
```
, visible with
```
translate-x-0
```
Uses
```
requestAnimationFrame
```
for smooth transition
300ms duration matches CSS transition

Sticky Elements:

Header:
```
sticky top-0 z-50
```
Mobile CTA:
```
fixed bottom-0 z-40
```
Footer:
```
pb-24
```
on mobile to clear CTA bar

Accessibility:

```
aria-expanded
```
on menu toggle
```
aria-current="page"
```
on active links
```
aria-label
```
on navigation landmarks
Skip link for keyboard navigation

Forbidden

❌ Hamburger menu on desktop
❌ Navigation without keyboard support
❌ Missing aria-expanded on toggles
❌ Logo without link to homepage
❌ Phone number not clickable on mobile
❌ Footer hidden by sticky mobile bar