Breadcrumb

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

The breadcrumb primitives compose a navigation landmark showing the path from the site root to the current location. Use Breadcrumb as the <nav> wrapper (it renders the <ol> internally), BreadcrumbItem for each list row, BreadcrumbLink or asChild for links, BreadcrumbPage for the current page (non-link), BreadcrumbLabel for non-link text when a segment is not the current page, BreadcrumbSeparator for chevrons, and BreadcrumbEllipsis for collapsed middle segments.

Props

Name	Type	Default	Description
`label`	`LocalizedMessage`	—	Accessible name of the landmark, such as "Breadcrumb". Name it so a page with two landmarks tells them apart.
`children`	`ReactNode`	—	One {@link BreadcrumbList }.
`className`	`string`	—	Optional module class from colocated CSS.
`ref`	`Ref<HTMLElement>`	—	Ref to the `nav`.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Basic

Custom separator

With ellipsis

With non-navigable segment

Single back link

Breadcrumb / Usage

Breadcrumb / Accessibility

On this page

With non-navigable segment

Single back link

Breadcrumb

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Props

Name	Type	Default	Description
`label`	`LocalizedMessage`	—	Accessible name of the landmark, such as "Breadcrumb". Name it so a page with two landmarks tells them apart.
`children`	`ReactNode`	—	One {@link BreadcrumbList }.
`className`	`string`	—	Optional module class from colocated CSS.
`ref`	`Ref<HTMLElement>`	—	Ref to the `nav`.