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. Each breadcrumb is represented by a link that, when clicked, redirects a user to the proper location.

Breadcrumbs are used in the case header to show case hierarchy. Case header breadcrumbs automatically constrain themselves. No manual work is needed.

The breadcrumbs component will automatically truncate the path of locations if all links cannot fit on a single line. This typically happens when the region or window is shrunk to a smaller width. In this instance, only the first and last items will show. 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 react.