Breadcrumb

A lightning:breadcrumb component displays the path of a page relative to a parent page. Breadcrumbs are nested 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 are listed in markup.

This component implements styling from breadcrumbs in the Lightning Design System.

Here is an example.

1<aura:component>
2  <lightning:breadcrumbs>
3    <lightning:breadcrumb label="Parent Account" href="path/to/place/1" />
4    <lightning:breadcrumb label="Case" href="path/to/place/2" />
5  </lightning:breadcrumbs>
6</aura:component>

The behavior of a breadcrumb is similar to a link for the purpose of navigation. If a link is not provided via the href attribute, the value defaults to #. Since a breadcrumb is used as navigation, we don’t recommend leaving out the href attribute since # links to the same page when middle-clicked or opened in a new tab.

To provide custom navigation, use an onclick handler. For example, using onclick is useful if you’re navigating using an event like force:navigateToSObject. 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<aura:component>
2  <lightning:breadcrumbs>
3    <lightning:breadcrumb
4      label="Parent Account"
5      href="path/to/place/1"
6      onclick="{! c.navigateToCustomPage1 }"
7    />
8    <lightning:breadcrumb
9      label="Case"
10      href="path/to/place/2"
11      onclick="{! c.navigateToCustomPage2 }"
12    />
13  </lightning:breadcrumbs>
14</aura:component>

Handle the click events in your client-side controller.

1/** Client-Side Controller **/
2({
3  navigateToCustomPage1: function (cmp, event) {
4    event.preventDefault();
5    //your custom navigation here
6  },
7  navigateToCustomPage2: function (cmp, event) {
8    event.preventDefault();
9    //your custom navigation here
10  },
11});

Iterate over a list of items using aura:iteration 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. Set these values in the init handler.

1<aura:component>
2  <aura:attribute name="myBreadcrumbs" type="Object" />
3  <aura:handler name="init" value="{! this }" action="{! c.init }" />
4  <lightning:breadcrumbs>
5    <aura:iteration items="{! v.myBreadcrumbs }" var="crumbs">
6      <lightning:breadcrumb
7        label="{! crumbs.label }"
8        onclick="{! c.navigateTo }"
9        name="{! crumbs.name }"
10      />
11    </aura:iteration>
12  </lightning:breadcrumbs>
13</aura:component>

Load the breadcrumbs in your client-side controller.

1/* Client-Side Controller */
2({
3  init: function (cmp, event, helper) {
4    var myBreadcrumbs = [
5      { label: "Account", name: "objectName" },
6      { label: "Record Name", name: "record" },
7    ];
8    cmp.set("v.myBreadcrumbs", myBreadcrumbs);
9  },
10  navigateTo: function (cmp, event, helper) {
11    //get the name of the breadcrumb that's clicked
12    var name = event.getSource().get("v.name");
13
14    //your custom navigation here
15  },
16});

A breadcrumb shows your location in an app’s hierarchy, not your browsing history. Breadcrumbs are especially useful when you need 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 in conjunction with a tree for navigating between nested pages. The full hierarchy path is listed on a second or third level page. When you are on a page deeper than three levels, the breadcrumb should display the last two links and truncate the rest of the hierarchy path for simplicity.