Breadcrumb

The Breadcrumb component shows the current page's location within the site hierarchy.

Basic Usage

With Icons

Separator

An item trail is joined by separator, a plain string. Leave it unauthored and the trail separates with the declared default, /:

Any string is accepted, including an empty one ("") for no visible separator at all.

Collapsing a long trail

maxItems bounds how many crumbs are rendered. When the trail is longer, the first crumb and the last maxItems - 1 survive and an ellipsis marks what was elided — so the current page, the crumb the trail exists to name, is never the one dropped:

A trail already within maxItems is rendered whole, and a maxItems that cannot mean a count (below 1) is ignored rather than emptying the trail.

Icons

An item's icon is a kebab-case Lucide icon name, resolved against lucide's runtime icons record — the same surface ui:button and the action:* family resolve against. A name that is not a live key of that record (an unknown, or a retired spelling such as layout) renders no glyph, never a fallback glyph and never the literal name as text. The glyph is drawn for every crumb: the final one (rendered as the current page) as well as the linked ones before it.

Schema

interface BreadcrumbItem {
  label: string;
  href?: string;
  icon?: string;                  // kebab-case Lucide icon name (e.g. "panels-top-left")
}

interface BreadcrumbSchema {
  type: 'breadcrumb';
  items: BreadcrumbItem[];        // Breadcrumb items
  separator?: string;             // Separator between crumbs (default "/")
  maxItems?: number;              // Maximum crumbs to display before collapsing
  className?: string;
}