Components

Breadcrumbs

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

BaseBasedev ready

Preview

Code

<nav role="navigation" aria-label="Breadcrumbs">
  <ol class="slds-breadcrumb slds-list--horizontal">
    <li class="slds-breadcrumb__item slds-text-title--caps"><a href="javascript:void(0);">Parent Entity</a></li>
    <li class="slds-breadcrumb__item slds-text-title--caps"><a href="javascript:void(0);">Parent Record Name</a></li>
  </ol>
</nav>

Component Overview

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.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-breadcrumb
Applied to:

<ol>

Outcome:

Initializes a breadcrumb component

Required:

Required

Comments:

This class allows the .slds-list__item to display in the breadcrumb style

.slds-breadcrumb__item
Applied to:

<li>

Outcome:

Item of the breadcrumb list

Required:

Required

Comments:

--