Breadcrumbs
- HTML/CSS:Dev Ready
- Layout:Desktop Only
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
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-breadcrumb |
|---|---|
| Summary | Create breadcrumbs component |
| Support | dev-ready |
| Restrict | ol |
| Variant | True |
| Selector | .slds-breadcrumb__item |
|---|---|
| Summary | Item of the breadcrumb list |
| Restrict | .slds-breadcrumb li |