Breadcrumbs

A lightning-breadcrumbs component is an ordered list that displays the path of a page and helps you navigate back to the parent. Each breadcrumb item is represented by a lightning-breadcrumb component. Breadcrumbs are actionable and separated by a greater-than sign.

For more information, see the lightning-breadcrumb documentation.

lightning-breadcrumbs implements the breadcrumbs blueprint in the Salesforce Lightning Design System (SLDS).

To apply additional styling, use the SLDS utility classes with the class attribute.

This example adds a margin around the breadcrumbs using an SLDS class.

Component styling hooks use the --slds-c-* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See Breadcrumbs: Styling Hooks Overview for documentation on component-specific hooks for this component.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

lightning-breadcrumbs renders with role="navigation", which is a landmark role that enables screen readers to provide keyboard navigation to the links on the breadcrumbs. The aria-label="Breadcrumbs" property is rendered automatically to inform screen readers the navigation type. Screen readers read both the role and the label description.

If your page includes another navigation landmark besides the breadcrumbs, you can use a different label for the other navigation landmark. Updating the aria-label property on lightning-breadcrumbs is currently not supported.

The last breadcrumb item usually corresponds to the current page a user is viewing. This breadcrumb item renders with aria-current="page", which is announced by the screen reader as the current page within a set of navigation links.