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

Do’s

  • 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

Don’ts

  • 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

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.