Breadcrumbs

Breadcrumbs

Use breadcrumbs to note the path of a record and help the user to navigate back to the parent.

Base

Preview

About Breadcrumbs

Breadcrumbs are typically constructed with an ol because their order matters. You mark up breadcrumbs with classes from the horizontal list utility. When you add the .slds-breadcrumb class, the separators are automatically generated.

Overflow Menu Variant

The overflow menu breadcrumbs variant is a composition of the overflow menu with actions example of the menus component and breadcrumbs component. To implement this, include the overflow menu as the first <li> in the breadcrumb component. In order to vertically align all of the breadcrumb items to the center, add the .slds-grid_vertical-align-center class to the <ol>.

Accessibility

Place the breadcrumb in a nav element with role="navigation". The nav element is also marked-up with aria-label="Breadcrumbs" to describe the type of navigation.


Overview of CSS Classes

Selector.slds-breadcrumb
Summary

Create breadcrumbs component

Restrictol
VariantTrue
Selector.slds-breadcrumb__item
Summary

Item of the breadcrumb list

Restrict.slds-breadcrumb li