Prototype Library

Breadcrumbs

Presentational breadcrumb trail showing the path to the current page. The last item is treated as the current page and is not a link.

Inherited .astro import EsaBreadcrumbs from '@esa/ecology/esa-breadcrumbs.astro';

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

PropTypeDefaultDescription
items EsaBreadcrumbItem[] — Trail of crumbs. Each item is { label; href?; icon? }. The last item is rendered as the current page.
size 'xs' | 'sm' | 'md' | 'lg' 'md' Type scale of the trail.

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".