| name | astro-navigation |
| description | Navigation patterns for Astro sites. Header, footer, mobile menu, breadcrumbs, skip links. Use for all navigation implementation. |
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:
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 togglearia-current="page" on active linksaria-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
Definition of Done
