Skip to content

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 settings.ui.css Interface tokens (see table below) Github

Playground

Style

Copied!
<nav class="breadcrumbs" aria-label="Breadcrumbs" style="--breadcrumbs-separator: '/'">
<ol>
  <li><a href="#">Home</a></li>
  <li><a href="#">Components</a></li>
  <li><span aria-current="page">Breadcrumbs</span></li>
</ol>
</nav>

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