Breadcrumb

The where-am-I trail above a record or nested view. Composed from named parts, so a caller decides which crumbs link, which is the current page, and where a long trail collapses. Semantics come from an ordered list inside a labelled nav; the final crumb is marked as the current page and the chevrons are decorative.

<Breadcrumb>  <BreadcrumbList>    <BreadcrumbItem>      <BreadcrumbLink href="/projects">Projects</BreadcrumbLink>    </BreadcrumbItem>    <BreadcrumbSeparator />    <BreadcrumbItem>      <BreadcrumbLink href="/projects/finance">Finance</BreadcrumbLink>    </BreadcrumbItem>    <BreadcrumbSeparator />    <BreadcrumbItem>      <BreadcrumbPage>Budget Forecast Engine</BreadcrumbPage>    </BreadcrumbItem>  </BreadcrumbList></Breadcrumb>

Collapsed trail

<Breadcrumb>  <BreadcrumbList>    <BreadcrumbItem>      <BreadcrumbLink href="/">Home</BreadcrumbLink>    </BreadcrumbItem>    <BreadcrumbSeparator />    <BreadcrumbItem>      <BreadcrumbEllipsis />    </BreadcrumbItem>    <BreadcrumbSeparator />    <BreadcrumbItem>      <BreadcrumbPage>Settings</BreadcrumbPage>    </BreadcrumbItem>  </BreadcrumbList></Breadcrumb>

Parts

Prop	Type	Default	Notes
`Breadcrumb`	`nav`	—	Labelled landmark; wraps the trail.
`BreadcrumbList`	`ol`	—	The ordered list of crumbs.
`BreadcrumbItem`	`li`	—	One crumb slot.
`BreadcrumbLink`	`a`	—	Navigable crumb; polymorphic via render.
`BreadcrumbPage`	`span`	—	The current page; aria-current="page".
`BreadcrumbSeparator`	`li`	—	Decorative divider; a chevron by default.
`BreadcrumbEllipsis`	`span`	—	Collapses a long trail; pair with a menu.