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

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

Definition of Done

• • Mobile menu works (open/close/escape)
• • Phone number clickable on mobile
• • CTA visible on all viewports
• • Skip link present
• • Keyboard navigable
• • Active page indicated
• • Footer above mobile sticky bar
• • Breadcrumbs on inner pages