Breadcrumb | Components | Lightning Component Reference

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

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.

1<template>
2    <lightning-breadcrumbs>
3        <lightning-breadcrumb label="Parent Account" href="path/to/place/1">
4        </lightning-breadcrumb>
5        <lightning-breadcrumb label="Case" href="path/to/place/2">
6        </lightning-breadcrumb>
7    </lightning-breadcrumbs>
8</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.

	SLDS 1	SLDS 2
Design	Breadcrumbs	Breadcrumbs
For Use In	Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline	Lightning Experience

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.

1<template>
2    <lightning-breadcrumbs>
3        <lightning-breadcrumb
4            label="Parent Account"
5            href="path/to/place/1"
6            onclick={handleNavigateToCustomPage1}
7        >
8        </lightning-breadcrumb>
9        <lightning-breadcrumb
10            label="Case"
11            href="path/to/place/2"
12            onclick={handleNavigateToCustomPage2}
13        >
14        </lightning-breadcrumb>
15    </lightning-breadcrumbs>
16</template>

Handle the click events in your JavaScript code.

1import { LightningElement } from 'lwc';
2
3export default class DemoBreadcrumbs extends LightningElement {
4
5handleNavigateToCustomPage1(event) {
6    event.preventDefault();
7    //your custom navigation here
8}
9handleNavigateToCustomPage2(event) {
10    event.preventDefault();
11    //your custom navigation here
12}

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.

1<template>
2    <lightning-breadcrumbs>
3        <template for:each={myBreadcrumbs} for:item="crumbs">
4            <lightning-breadcrumb
5                key={crumbs.id}
6                label={crumbs.label}
7                name={crumbs.name}
8                onclick={handleNavigateTo}
9            >
10            </lightning-breadcrumb>
11        </template>
12    </lightning-breadcrumbs>
13</template>

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

1//mybreadcrumbs.js
2import { LightningElement, track } from "lwc";
3
4export default class MyComponentName extends LightningElement {
5  @track
6  myBreadcrumbs = [
7    { label: "Account", name: "objectName", id: "account1" },
8    { label: "Record Name", name: "record", id: "account2" },
9  ];
10
11  handleNavigateTo(event) {
12    //get the name of the breadcrumb that's clicked
13    const name = event.target.name;
14    event.preventDefault();
15    //your custom navigation here
16  }
17}

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.

Attributes

Name	Description	Type
aria-current	Reserved for internal use.
href	The URL of the page that the breadcrumb goes to.	string
label	The text label for the breadcrumb.	string
name	The name for the breadcrumb component. This value is optional and can be used to identify the breadcrumb in a callback.	string

Methods

Name	Description	Argument Name	Argument Type	Argument Description
blur	Removes focus on the link.
focus	Sets focus on the link.

Design

Usage Considerations

See Also

Attributes

Methods

Lightning Component Reference

Contents