Navigation is consistent across pages

WCAG 2.2 Success Criteria 3.2.3 (Consistent Navigation, Level AA) and 3.2.4 (Consistent Identification, Level AA) require that navigation appearing on multiple pages uses the same order and labeling. Government sites frequently serve citizens across dozens of sessions — inconsistent navigation forces relearning on every visit and creates confusion that disproportionately affects users with cognitive disabilities. Broken navigation links (404s) from government pages also directly block citizens from accessing services they are legally entitled to use, and are among the most common failures in federal web audits.

Extract all navigation into a single shared component and import it exclusively from app/layout.tsx — never override it in sub-layouts. Use Next.js usePathname() to highlight the active link.

// components/SiteNav.tsx
'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

const links = [
  { href: '/', label: 'Home' },
  { href: '/about', label: 'About' },
  { href: '/services', label: 'Services' },
  { href: '/contact', label: 'Contact' },
]

export function SiteNav() {
  const path = usePathname()
  return (
    <nav aria-label="Main">
      <ul>
        {links.map(({ href, label }) => (
          <li key={href}>
            <Link href={href} aria-current={path === href ? 'page' : undefined}>
              {label}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  )
}

Verify all nav links resolve with curl -o /dev/null -sw "%{http_code}" <url> in CI.