---
schema_version: "1"
id: 51cedd95341b1618ae70abc789fe7facbd90c9caf6b3ffdcd687b0240fb2b975
title: Breadcrumbs
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/breadcrumbs/lightning-breadcrumbs.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-breadcrumbs.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 3d42880b8b1cef8f4a15915c00ec5f5305e5e7afe32fea1f9d2a13155508a3d8
products:
  - Lightning Component Reference
---

# Breadcrumbs

**`lightning-breadcrumbs`**

A hierarchy path of the page you're currently visiting within the website or app.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="breadcrumbs" model="lwc" namespace="lightning"}


:::::

:::::tab

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

For more information, see the [`lightning-breadcrumb`](/docs/platform/lightning-component-reference/guide/lightning-breadcrumb.html) documentation.

## Design

`lightning-breadcrumbs` implements the breadcrumbs blueprint in the Salesforce Lightning Design System (SLDS). The breadcrumbs adapt to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

|                | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Breadcrumbs](https://v1.lightningdesignsystem.com/components/breadcrumbs/)                                                           | [Breadcrumbs](https://www.lightningdesignsystem.com/components/breadcrumb/)                                     |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Component Styling

Use utility classes to style your breadcrumbs.

### Utility Classes

To apply additional styling, use the SLDS [utility classes](https://v1.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.

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

<!-- prettier-ignore-start -->
```html
<lightning-breadcrumbs class="slds-m-around_small">
    <lightning-breadcrumb
        label="Parent Account"
        href="http://example.com/parent"
    >
    </lightning-breadcrumb>
    <lightning-breadcrumb label="Case" href="http://example.com/case">
    </lightning-breadcrumb>
</lightning-breadcrumbs>
```
<!-- prettier-ignore-end -->

### Styling Hooks

Component styling hooks provide CSS custom properties that use the `--slds-c-*` prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the [SLDS 1 component blueprints](https://v1.lightningdesignsystem.com/components/overview/) for available component styling hooks.

For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.


## Accessibility

`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 that 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.


:::::

:::::tab
::component-specification{component="breadcrumbs" model="lwc" namespace="lightning"}

:::::

::::::