Breadcrumb

Default

Custom separator

Explicit current

The last item is current by default. Set current: true on an earlier item to make it the current page instead; the items after it keep their links. Set current: false on the last item when the page shown is not in the trail. Only one item is ever current.

Long trails

A trail that does not fit its container wraps onto more lines. Every level stays visible with its separator, and a label wider than the line breaks. An empty trail renders nothing.

Props

PROP	TYPE	DEFAULT	REQUIRED
`items` Ordered trail. Each entry: { label: string; href?: string; current?: boolean }. Exactly one item is current: the first that sets current:true, otherwise the last unless it sets current:false. Items after the current one keep their links. A trail that does not fit wraps onto more lines; an empty trail renders nothing.	`array`	—	yes
`separator` ReactNode rendered between items (default: a small chevron-right SVG). Decorative; rendered aria-hidden. Pass a string like '/' for a slash separator.	`node`	—	no

Accessibility

Named navigation landmark with an ordered list; an empty trail renders no landmark.
The current page is a non-link aria-current="page" span, and only one item is current.
Separators are aria-hidden; links have a visible focus ring.

Manifest entry

<Breadcrumb items={[{label:"HOME",href:"/"},{label:"OPS",href:"/ops"},{label:"TRACK 7"}]} />

View agent manifest

{
  "description": "Self-contained navigation trail rendered from a flat array of items, with the final (or flagged) item marked as the current page.",
  "props": {
    "items": {
      "type": "array",
      "items": {
        "label": "string",
        "href": "string (optional — omit to render plain text)",
        "current": "boolean (optional — defaults to true on the last item)"
      },
      "required": true,
      "description": "Ordered trail. Each entry: { label: string; href?: string; current?: boolean }. Exactly one item is current: the first that sets current:true, otherwise the last unless it sets current:false. Items after the current one keep their links. A trail that does not fit wraps onto more lines; an empty trail renders nothing."
    },
    "separator": {
      "type": "node",
      "description": "ReactNode rendered between items (default: a small chevron-right SVG). Decorative; rendered aria-hidden. Pass a string like '/' for a slash separator."
    }
  },
  "composable_with": [
    "Card"
  ],
  "never_inside": [
    "Breadcrumb"
  ],
  "example": "<Breadcrumb items={[{label:\"HOME\",href:\"/\"},{label:\"OPS\",href:\"/ops\"},{label:\"TRACK 7\"}]} />"
}