Example
Patterns
Collections
Breadcrumbs implements react-stately collection components, accepting only static children.
Breadcrumbs accepts <Item> elements as children, each with a key prop, which is passed to the onAction handler to identify the selected item.
Links
By default, interacting with an item in Breadcrumbs triggers onAction. Items may also be links to another page or website. This can be achieved by passing an href prop to the <Item> component.
Client-side routing
The <Item> component works with frameworks and client-side routers like Next.js and React Router. As with other components that support links, this works via the Provider component at the root of your app. See the client-side routing section to learn how to set this up.
Overflow
Breadcrumbs collapses items into a menu when space is limited. It will only show a maximum of 4 visible items including the root and menu button, if either are visible. Note that the last breadcrumb item will automatically truncate with an ellipsis instead of collapsing into the menu.
Resize your browser window to see the above behavior in the examples below.
If the root item cannot be rendered in the available horizontal space, it will be collapsed into the menu regardless of showRoot.
Props
Disabled
Breadcrumbs in a disabled state shows items, but indicates that navigation is not available. This can be used to maintain layout continuity.
Size
Breadcrumbs accept a size prop, which aligns with the Text component.