Library · Foundations

Breadcrumbs

Accessible breadcrumb navigation following WAI-ARIA guidelines with support for text and icon items.

Live preview — edit theme bottom-right

---
import Breadcrumbs from "../components/primitives/breadcrumbs/Breadcrumbs.astro";
import BreadcrumbsItem from "../components/primitives/breadcrumbs/BreadcrumbsItem.astro";
---
<Breadcrumbs>
  <BreadcrumbsItem label="Home" href="/" />
  <BreadcrumbsItem label="Projects" href="/projects" />
  <BreadcrumbsItem label="Current page" currentPage />
</Breadcrumbs>

<Breadcrumbs>
  <BreadcrumbsItem label="Home" href="/" hasIcon>
    <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    </svg>
  </BreadcrumbsItem>
  <BreadcrumbsItem label="Current page" currentPage />
</Breadcrumbs>

Props

Name	Type	Required	Description
`class`	`string`	—	Additional classes to apply to the breadcrumbs container
`children`	`BreadcrumbsItem \| BreadcrumbsItem[]`	Yes	Breadcrumb items to render
`ariaLabel`	`string`	—	Accessible label for the breadcrumb navigation (default: 'Breadcrumbs')
`[key: string]`	`string \| number \| boolean \| undefined \| BreadcrumbsItem \| BreadcrumbsItem[]`	—	HTML attributes to spread on the breadcrumbs
`Item: class`	`string`	—	Additional classes to apply to the item
`Item: label`	`string`	Yes	Text label for the breadcrumb
`Item: href`	`string`	—	URL for the breadcrumb link (default: "#")
`Item: currentPage`	`boolean`	—	Whether this item represents the current page (default: false)
`Item: hasIcon`	`boolean`	—	Whether this item has an icon (default: false)
`Item: [key: string]`	`string \| number \| boolean \| undefined`	—	HTML attributes to spread on the breadcrumb item

Example with all props

<Breadcrumbs class="site-breadcrumbs" ariaLabel="You are here">
  <BreadcrumbsItem class="crumb" href="/" label="Home" hasIcon>
    <svg slot="icon" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
      <path fill="currentColor" d="M12 3l9 8h-3v9h-5v-6h-2v6H6v-9H3z" />
    </svg>
  </BreadcrumbsItem>
  <BreadcrumbsItem href="/projects" label="Projects" />
  <BreadcrumbsItem label="Newstead" currentPage />
</Breadcrumbs>