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 } })
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 } })
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. |