Breadcrumbs

Breadcrumbs for navigation or content hierarchy.

Attributes

text - The text to display on the breadcrumb item.
href - The URL to link to. If this attribute is present, the breadcrumb item will be rendered as an anchor tag.
icon - The icon to display on the breadcrumb item.

Basic Usage

Wrap aura:breadcrumbs.item components in an aura:breadcrumbs component to create a breadcrumb trail.

Copy to clipboard

<aura:breadcrumbs>
    <aura:breadcrumbs.item href="#" text="Home" />
    <aura:breadcrumbs.item href="#" text="Products" />
    <aura:breadcrumbs.item text="Product 1" current/>
</aura:breadcrumbs>

Icon

The breadcrumb item component can also display an icon.

Copy to clipboard

<aura:breadcrumbs>
    <aura:breadcrumbs.item href="#" icon="home" text="Home" />
    <aura:breadcrumbs.item href="#" icon="tag" text="Products" />
    <aura:breadcrumbs.item icon="tag" text="Product 1" current/>
</aura:breadcrumbs>

Separator

The separator attribute can be used to specify a custom separator between breadcrumb items.

slash - A slash separator. This is the default separator.
chevron - A chevron separator.
arrow - An arrow separator.

Copy to clipboard

<aura:breadcrumbs>
    <aura:breadcrumbs.item chevron href="#" text="Home" />
    <aura:breadcrumbs.item arrow href="#" text="Products" />
    <aura:breadcrumbs.item  text="Product 1"/>
</aura:breadcrumbs>

Home