component :: Breadcrumbs

The .breadcrumbs component is a nav > ol trail with CSS-only separators, and optional BreadcrumbList JSON-LD for search engines.

File	Description	Source
`component.breadcrumbs.css`	All breadcrumb styles	Github
`Breadcrumbs.astro`	The Astro component	Github
`--breadcrumbs-*` block in default theme	Theme tokens (see table below)	Github

HTML

<nav class="breadcrumbs" aria-label="Breadcrumbs">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/components/start">Components</a></li>
    <li><span aria-current="page">Breadcrumbs</span></li>
  </ol>
</nav>

The last crumb is text, not a link, marked with aria-current="page"; the separators are generated content with empty alt text, so screen readers read the trail as a clean list. The separator lives in CSS, not the markup — change it by overriding one token:

:root {
  --breadcrumbs-separator: "→";
}

Custom properties

Property	Description
`--breadcrumbs-separator`	Separator string (default `/`).
`--breadcrumbs-separator-color`	Separator color.
`--breadcrumbs-color`	Link color.
`--breadcrumbs-color-current`	Current page (last crumb) color.

Astro component

Prop	Type	Default	Description
`items`	`{ label, href? }[]`	—	The trail. The last item (or any item without `href`) is text.
`ariaLabel`	`string`	`"Breadcrumbs"`	The nav’s accessible name.
`jsonLd`	`boolean`	`false`	Emit BreadcrumbList structured data (hrefs resolved to absolute).
`class`	`string`	`undefined`	Additional CSS classes.

Examples

---
import Breadcrumbs from "../components/Breadcrumbs.astro";
---
<Breadcrumbs
  jsonLd
  items={[
    { label: "Docs", href: "/docs/start" },
    { label: "Global Styles", href: "/docs/global" },
    { label: "Grid" },
  ]}
/>