Breadcrumb

A trail of links that shows where the current page sits in a hierarchy and lets people step back up it.

When to use

• Nested structures three or more levels deep: projects, folders, documents, settings sections.
• Drill-down views held in local state, where each crumb is a button instead of a link.
• Not for steps in a flow: use Stepper. Not as the only navigation on a page with a shallow hierarchy.

Usage

import { Breadcrumb } from "@/components/iris/breadcrumb/breadcrumb";

h(Breadcrumb, {
  items: [
    { label: "Projects", href: "/projects" },
    { label: "notdocs", href: "/projects/notdocs" },
    { label: "Seat-based pricing" },
  ],
});

Props

Prop	Type	Default	Description
items	{ label: string; href?: string; onClick?: (event) => void }[]	—	Required. In order from root to current page. The last item is the current page.
ariaLabel	string	"Breadcrumb"	Name of the wrapping nav landmark.

Each non-final crumb renders as a link when it has href, as a button when it has only onClick, and as plain text otherwise.

Notes

• Renders nav > ol; the last crumb gets aria-current="page". Separators are decorative chevrons hidden from assistive tech.
• Links render through ProvidedLink (a plain <a> by default), so a router link can be supplied through the Iris UI provider.
• Crumbs present on first render stay still; crumbs added later slide in from the previous one, and removed crumbs fade out. Reduced motion skips the movement.
• Reads --ink-2, --ink-3, --accent-ink (current page), --line-strong.