Breadcrumbs present for deep hierarchies

WCAG 2.2 SC 2.4.8 (Location, Level AAA) recommends breadcrumbs for sites with hierarchical structure — but for government sites with services organized 3–4 levels deep (e.g., /services/health/insurance/dental), breadcrumbs are a practical navigation necessity, not a luxury. Without them, users who land on a deep content page via search have no path back to parent sections, and users with cognitive or memory disabilities cannot orient themselves within the site. Federal sites with large service catalogs that lack breadcrumbs routinely show high exit rates on deep pages.

Add a breadcrumb component to any route nested 3 or more levels deep. Use aria-label="Breadcrumb" and mark the current page with aria-current="page".

// components/Breadcrumbs.tsx
interface BreadcrumbItem { label: string; href?: string }

export function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
  return (
    <nav aria-label="Breadcrumb">
      <ol>
        {items.map((item, i) => (
          <li key={i}>
            {item.href ? (
              <a href={item.href}>{item.label}</a>
            ) : (
              <span aria-current="page">{item.label}</span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  )
}

// Usage in app/services/health/insurance/page.tsx
<Breadcrumbs items={[
  { label: 'Home', href: '/' },
  { label: 'Services', href: '/services' },
  { label: 'Health', href: '/services/health' },
  { label: 'Insurance' },
]} />