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#