Breadcrumbs

Breadcrumbs show a page’s location within a navigational hierarchy. Breadcrumbs also provide access to all parent pages in the navigational hierarchy.

Example

Copied to clipboard

<ul class="luci-breadcrumb">
    <li class="luci-breadcrumb__item">
        <a href="#" class="luci-breadcrumb__link" tabindex="0">
            <span class="luci-breadcrumb__text">Breadcrumb Link</span>
        </a>
    </li>
    <li class="luci-breadcrumb__item">
        <a href="#" class="luci-breadcrumb__link" tabindex="0">
            <span class="luci-breadcrumb__text">Breadcrumb Link 2</span>
        </a>
    </li>
    <li class="luci-breadcrumb__item">
        <span class="luci-breadcrumb__text">Current Page</span>
    </li>
</ul>

Do’s and Don’ts

Use on all subpages of the home or landing page of a site or product.
Display the name of the current page as the last breadcrumb. This breadcrumb is not a link.
Ensure that linked breadcrumbs are keyboard navigable

Use on the home or landing page of a site or product.
Link the name of the current page when it’s the last breadcrumb.

States

Focus

Hover

Copied to clipboard

<ul class="luci-breadcrumb">
    <li class="luci-breadcrumb__item">
        <a href="#" class="luci-breadcrumb__link" tabindex="0">
            <span class="luci-breadcrumb__text">Breadcrumb Link</span>
        </a>
    </li>
    <li class="luci-breadcrumb__item">
        <a href="#" class="luci-breadcrumb__link" tabindex="0">
            <span class="luci-breadcrumb__text">Breadcrumb Link 2</span>
        </a>
    </li>
    <li class="luci-breadcrumb__item">
        <span class="luci-breadcrumb__text">Current Page</span>
    </li>
</ul>

Class Reference

Class	Applies to	Outcome
`.luci-breadcrumb__link-hover`	`.luci-breadcrumb__link`	Underlines the breadcrumb link.
`.luci-breadcrumb__link-focus`	`.luci-breadcrumb__link`	Applies a focus state to the breadcrumb link.