Breadcrumbs
Breadcrumbs display the current page or context within the site, allowing them to navigate different levels of the hierarchy.
Page navigation navigation
Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site's hierarchy. Breadcrumbs show and link to pages higher up in the ancestry.
React examples
Default
Props
Breadcrumbs
| Name | Default | Description |
|---|---|---|
className | stringAdditional CSS class names to apply to the breadcrumbs container | |
children | Breadcrumbs.Item[]Breadcrumb items to render. Each item should be a Breadcrumbs.Item component. | |
overflow | 'wrap' | 'wrap' | 'menu' | 'menu-with-root'How to handle overflow when breadcrumbs don't fit in the container. 'wrap' allows items to wrap to new lines. 'menu' collapses items into an overflow menu. 'menu-with-root' also collapses items into an overflow menu but includes the root (first) breadcrumb in the menu so only the last items remain visible. |
Breadcrumbs.Item
| Name | Default | Description |
|---|---|---|
selected | false | booleanWhether this item represents the current page. Sets aria-current='page' for accessibility. |
to | string | Partial<Path>Used when the item is rendered using a component like React Router's | |
href | stringThe URL that the breadcrumb item links to. Used with regular anchor elements. | |
children Required | React.ReactNodeThe content to display inside the breadcrumb item, typically text. | |
ref | React.RefObject<HTMLAnchorElement> | |
as | "a" | React.ElementType |