Breadcrumb

A trail of marker slashes from home to here. Intermediate pages tuck behind an ellipsis in narrow containers; reveal them with a click, Enter or Space.

Client componentWCAG AA

import { Breadcrumb } from "@plop-ui/react";
import Link from "next/link"; // Only in your app; optional for plain anchors.

<Breadcrumb as={Link} items={[
  { label: "Home", href: "/" },
  { label: "Docs", href: "/docs/what-is-plopui" },
  { label: "Breadcrumb" },
]} />

// Keep every ancestor visible even in narrow containers:
<Breadcrumb collapse={false} items={[
  { label: "Home", href: "/" },
  { label: "Current page" },
]} />

Props

Prop	Type	Default	What it does
items required	readonly BreadcrumbItem[]	—	Locations in hierarchy order; the last item is always the current page.
as	ElementType	a	Your router's link component, e.g. Next.js `Link`.
collapse	boolean	true	Collapse intermediate items below 520px of available width.
collapseLabel	string	Hide intermediate pages	Accessible name when intermediate pages are visible.
expandLabel	string	Show intermediate pages	Accessible name for the collapsed trail's disclosure.

Also takes every attribute of <nav> (279 more, e.g. onClick, className, aria-*).

Use it well

DoList locations in hierarchy order. The last item is always the current page. Set href on ancestors; omit it for a non-navigable category.

Don'tUse breadcrumbs as browsing history, or replace primary navigation with them.

Accessibility

Native nav with aria-label=Breadcrumb and an ordered list. Override aria-label when more than one trail is present.
The final item has aria-current=page and never renders as a link, even if given an href.
Marker separators are decorative and hidden from screen readers. Tab visits ancestor links; Enter follows them.
Below 520px of container width, a labelled button reveals intermediate items with Enter or Space. It keeps focus and reports aria-expanded.
Surface text and focus tokens work across all five surfaces in light and dark. There is no animation, including under reduced motion.