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

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