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.

<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>

Design

Use lightning-breadcrumb within lightning-breadcrumbs, 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.

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. If you provide a link in the href attribute, calling event.preventDefault() enables you to bypass the link and use your custom navigation instead.

<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>

Handle the click events in your JavaScript code.

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.

<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>

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

//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

:::::

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

:::::

::::::