lightning:breadcrumb

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

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 inherits styling from breadcrumbs in the Lightning Design System.

Here is an example.

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

The behavior of a breadcrumb is similar to a link. If a link is not provided via the href attribute, the value defaults to javascript:void(0);. 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.

<aura:component>
    <lightning:breadcrumbs>
        <lightning:breadcrumb label="Parent Account" href="path/to/place/1" onclick="{! c.navigateToCustomPage1 }"/>
        <lightning:breadcrumb label="Case" href="path/to/place/2" onclick="{! c.navigateToCustomPage2 }"/>
    </lightning:breadcrumbs>
</aura:component>

/** Client-Side Controller **/
({
    navigateToCustomPage1: function (cmp, event) {
        event.preventDefault();
        //your custom navigation here 
    },
    navigateToCustomPage2: function (cmp, event) {
        event.preventDefault();
        //your custom navigation here
    }
})
Generating Breadcrumbs with aura:iteration

Iterate over a list of items using aura:iteration to generate breadcrumbs. For example, you can create an array of breadcrumbs with label and name values. Set these values in the init handler.

<aura:component>
    <aura:attribute name="myBreadcrumbs" type="Object"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:breadcrumbs>
        <aura:iteration items="{! v.myBreadcrumbs }" var="crumbs">
            <lightning:breadcrumb label="{! crumbs.label }" onclick="{! c.navigateTo }" name="{! crumbs.name }"/>
        </aura:iteration>
    </lightning:breadcrumbs>
</aura:component>

/* Client-Side Controller */
({
    init: function (cmp, event, helper) {
        var myBreadcrumbs = [
            {label: 'Account', name: 'objectName' },
            {label: 'Record Name', name: 'record' }
        ];
        cmp.set('v.myBreadcrumbs', myBreadcrumbs);
    },
    navigateTo: function (cmp, event, helper) {
        //get the name of the breadcrumb that's clicked
        var name = event.getSource().get('v.name');
        
        //your custom navigation here
    }
})

Attributes

Attribute Name Attribute Type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.
class String A CSS class for the outer element, in addition to the component's base classes.
href String The URL of the page that the breadcrumb goes to.
label String The text label for the breadcrumb. Yes
name String The name for the breadcrumb component. This value is optional and can be used to identify the breadcrumb in a callback.
onclick Action The action triggered when the breadcrumb is clicked.
title String Displays tooltip text when the mouse moves over the element.