---
schema_version: "1"
id: 4b3dee8d9685dd06ded1139afbfd792667fda579fd0cefb4334b994e24dc106e
title: Breadcrumb
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/breadcrumb/lightning-breadcrumb.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-breadcrumb.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f95c5ced0349848759b9d5f48e152d9d0bcaee7ac6388bf863861a95e63e7110
products:
  - Lightning Component Reference
---
# Breadcrumb

**`lightning-breadcrumb`**

An item in the hierarchy path of the page the user is on.

**For Use In**

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

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

:::::tab

A `lightning-breadcrumb` component shows the path of a page relative to a
parent page. Nest `lightning-breadcrumb` in a `lightning-breadcrumbs` component.
Each breadcrumb is actionable and separated by a greater-than sign. The order
the breadcrumbs appear depends on the order they’re listed in markup.

Here's an example.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-breadcrumbs>
        <lightning-breadcrumb label="Parent Account" href="path/to/place/1">
        </lightning-breadcrumb>
        <lightning-breadcrumb label="Case" href="path/to/place/2">
        </lightning-breadcrumb>
    </lightning-breadcrumbs>
</template>
```
<!-- prettier-ignore-end -->

## Design

Use `lightning-breadcrumb` within [`lightning-breadcrumbs`](/docs/platform/lightning-component-reference/guide/lightning-breadcrumbs.html), which 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) |

## Create Links Using Breadcrumbs

The behavior of a breadcrumb is similar to a link that's for navigation. If a link isn’t provided via the `href` attribute, the value defaults to `#`. Since a breadcrumb is for navigation, we don't recommend leaving out the `href` attribute because `#` links to the same page when middle-clicked or opened in a new tab.

To provide custom navigation, use an `onclick` handler with [`lightning-navigation`](/docs/platform/lightning-component-reference/guide/lightning-navigation.html). If you provide a link in the `href` attribute, calling `event.preventDefault()` enables you to bypass the link and use your custom navigation instead.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-breadcrumbs>
        <lightning-breadcrumb
            label="Parent Account"
            href="path/to/place/1"
            onclick={handleNavigateToCustomPage1}
        >
        </lightning-breadcrumb>
        <lightning-breadcrumb
            label="Case"
            href="path/to/place/2"
            onclick={handleNavigateToCustomPage2}
        >
        </lightning-breadcrumb>
    </lightning-breadcrumbs>
</template>
```
<!-- prettier-ignore-end -->

Handle the `click` events in your JavaScript code.

```javascript
import { LightningElement } from 'lwc';

export default class DemoBreadcrumbs extends LightningElement {

handleNavigateToCustomPage1(event) {
    event.preventDefault();
    //your custom navigation here
}
handleNavigateToCustomPage2(event) {
    event.preventDefault();
    //your custom navigation here
}
```

## Generate Breadcrumbs with Iteration

Iterate over a list of items by using `for:each` to generate breadcrumbs. If you don't provide a link with an `onclick` handler, `href` defaults to `#`.

For example, you can create an array of breadcrumbs with label and name values.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-breadcrumbs>
        <template for:each={myBreadcrumbs} for:item="crumbs">
            <lightning-breadcrumb
                key={crumbs.id}
                label={crumbs.label}
                name={crumbs.name}
                onclick={handleNavigateTo}
            >
            </lightning-breadcrumb>
        </template>
    </lightning-breadcrumbs>
</template>
```
<!-- prettier-ignore-end -->

Get the name of the breadcrumb that's clicked by using the `event.target` property.

```javascript
//mybreadcrumbs.js
import { LightningElement, track } from "lwc";

export default class MyComponentName extends LightningElement {
  @track
  myBreadcrumbs = [
    { label: "Account", name: "objectName", id: "account1" },
    { label: "Record Name", name: "record", id: "account2" },
  ];

  handleNavigateTo(event) {
    //get the name of the breadcrumb that's clicked
    const name = event.target.name;
    event.preventDefault();
    //your custom navigation here
  }
}
```

## Usage Considerations

A breadcrumb shows your location in an app's hierarchy, not your browsing history. Breadcrumbs are especially useful when you want to go to a parent page from another page in the app. They also help you situate yourself in the app.

Breadcrumbs are commonly used with a tree for navigating between nested pages. The full hierarchy path is listed on a second or third level page.

Creating breadcrumbs with an overflow menu using `lightning-breadcrumbs` isn't currently supported.

## See Also

[`lightning-navigation`](/docs/platform/lightning-component-reference/guide/lightning-navigation.html)


:::::

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

:::::

::::::