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.

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.

Handle the click events in your client-side controller.

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.

Load the breadcrumbs in your client-side controller.

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.