Breadcrumbs

Breadcrumb trail for a page.

Preview

src/examples/breadcrumbs/example.astro

---
import { Breadcrumbs } from "@/presentation/components/site/breadcrumbs";
---

<Breadcrumbs
  items={[
    { label: "Home", href: "#" },
    { label: "Docs", href: "#" },
    { label: "Components" },
  ]}
/>

Add to your site

npx docs-sitekit add breadcrumbs

It writes these files, and keeps a file you changed:

src/presentation/components/site/breadcrumbs.tsx

It requires these entries of the registry, which add restores first:

breadcrumb

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of Breadcrumbs
Key	Type	Default	Allowed values	Description
`items`	readonly { label: string; href?: string; }[]	required	-	The trail, from the home page to the current one. An item with no href is the current page.

Variants and states

Only the current page

A trail of one item has no link and no separator.

src/examples/breadcrumbs/current-only.astro

---
import { Breadcrumbs } from "@/presentation/components/site/breadcrumbs";
---

<Breadcrumbs items={[{ label: "Home" }]} />

About

The trail from the home page to the current page, built on the Breadcrumb of shadcn/ui. The last item is the page itself and has no link.

Accessibility

It is a <nav> named “breadcrumb” that holds an ordered list.
The current page has aria-current="page".
The chevron between two items is aria-hidden.
A link is 44 px high on a phone and 24 px from the md width.

Source

Edit this page

Last updated 5 November 2026