Breadcrumbs
- HTML/CSS:Dev Ready
- Web Component:True
- Layout:Desktop Only
Sections
You are currently viewing a sandbox preview version of Winter ’25 | Go back to Summer ’24
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.
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.
Base#
<nav role="navigation" aria-label="Breadcrumbs">
<ol class="slds-breadcrumb slds-list_horizontal slds-wrap">
<li class="slds-breadcrumb__item">
<a href="#">Parent Entity</a>
Variations#
With Overflow#
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>
.
<nav role="navigation" aria-label="Breadcrumbs">
<ol class="slds-breadcrumb slds-list_horizontal slds-wrap slds-grid_vertical-align-center">
<li class="slds-breadcrumb__item">
<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
Styling Hooks Overview#
The component styling hooks in this table are compatible with Lightning UI, but they aren’t compatible with Enhanced Lightning UI.
Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.
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 |
Breadcrumbs Release Notes
2.17.0
Added
- Added
slds
as the default namespace withsds
fallbacks for Styling Hooks.
2.15.0
- Added Kinetic styles and demo functionality for Breadcrumbs
2.13.0
- Enabled styling hooks for breadcrumb. See breadcrumb's styling hooks overview table for a full listing of the currently available hooks.
2.8.4
Fixed
- Adjusted typographic styling for breadcrumb items.
2.8.0
Changed
- Added bold font weight to '.slds-breadcrumb__item`.
Removed
- Removed
.slds-text-title_caps
from breadcrumb list item.