Breadcrumbs

The Breadcrumbs component offers a quick way to navigate along a path of pages or application locations that have lead a user to the current page or view. Each breadcrumb is represented by a Link that will redirect a user to the given href within the same window. If no href value is provided to a particular breadcrumb, the text value will render as plain Text. This use case should be limited to the final location in the path, representing the current page or view.

Breadcrumbs should be limited to no more than 5 Links in order to prevent cluttering at the top of the screen.

The Breadcrumbs component will automatically truncate the path of locations if the component is unable to render all Links on a single line. The truncation will begin at the start of the path and continue until there is only one location visible. All other Links will render within a Menu that can be toggled by clicking on the ellipsis at the start of the Breadcrumbs. Try changing the size of this screen to see how the Breadcrumbs behave.