Breadcrumb

Trail of links back up the hierarchy. The last item is rendered as the current page rather than a link.

Props

Prop	Values	Default	Description
`items`	array	required	`{ label, href }` per level. Omit `href` to render plain text.
`className`	string	`""`	Appended after the component's own classes.

Common patterns

<Breadcrumb
  items={[
    { label: "Acme", href: "/" },
    { label: "Projects", href: "/projects" },
    { label: "api-gateway" },
  ]}
/>

Notes

The last item never renders as a link, whether or not you give it an href — linking to the page you're already on is a dead end. It gets aria-current="page" so assistive technology knows where you are.

The separators are aria-hidden SVGs rather than text characters, so a screen reader reads "Acme, Projects, api-gateway" instead of "Acme slash Projects slash api-gateway".

It renders plain <a> elements. If you're in a framework with a client-side router, swap them for your Link component in your copy — that is a one-line change and exactly the kind of thing owning the file makes easy.