Breadcrumbs

Preview

<EsaBreadcrumbs items={[
  { label: 'Home', href: '/' },
  { label: 'Projects', href: '/projects' },
  { label: 'Wetland Survey' },
]} />

States

Crumbs accept an optional leading icon (raw inline SVG) on any item — useful for a home glyph.

<EsaBreadcrumbs items={[
  { label: 'Home', href: '/', icon: homeIconSvg },
  { label: 'Compliance', href: '/compliance' },
  { label: 'Permits', href: '/compliance/permits' },
  { label: 'NPDES-2024-118' },
]} />

Sizes

<EsaBreadcrumbs items={items} size="xs" />
<EsaBreadcrumbs items={items} size="sm" />
<EsaBreadcrumbs items={items} size="md" />
<EsaBreadcrumbs items={items} size="lg" />

API

Each EsaBreadcrumbItem is { label: string; href?: string; icon?: string }. Omit href on the final item; icon is a raw inline SVG string.

Accessibility

• Wraps the trail in <nav aria-label="Breadcrumb"> with an ordered <ol>.
• The last crumb receives aria-current="page" and renders as plain text, not a link.
• The chevron separator is decorative — marked aria-hidden="true".

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.