Breadcrumbs

The Breadcrumbs component offers a quick way to navigate along a hierarchy of data or a path of locations that have led a user to the current page or view.

For more information on how to use the features and props for this component, check out the developer documentation.

The Breadcrumbs component requires a path which is just a list of Menu item props. Each individual crumb must include primary text, and optionally some visual. If an onClick event is provided, the crumb will render as a Button. If an href is provided, the crumb will render as a Link. If neither are provided, the crumb will render as non-interactable Text. This should be reserved for the final crumb in your path, representing the current page or resource.

The Breadcrumbs component will automatically truncate the path of locations if all crumbs cannot fit on a single line. This typically happens when the region or window is shrunk to a smaller width. The truncation begins at the start of the path and crumbs will begin to render within a Menu that can be toggled by clicking on the folder Icon at the start of the Breadcrumbs. Try changing the size of this screen to see how the Breadcrumbs component behave.