Breadcrumb

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.

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.

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.

Handle the click events in your JavaScript code.

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.

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

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.

lightning-navigation