Page component: Breadcrumbs

This reference guide describes the breadcrumb navigation component. This component appears on pages with the item page page type.

Usage

Use this guide to understand how this component works, how its individual elements are structured, and how to target them for customization.

The tables in this guide list the constituent elements of this page component, as well as the relevant CSS selectors (for both the component itself, and its container). The listed elements are present in this page component out-of-the-box.

About breadcrumbs

The breadcrumbs component acts as secondary navigation within a hub front end. It consists of horizontally laid out text links divided by > symbols that represent the "trail" taken by the visitor to get to the current item page. It is structured as follows:

Home Link | Divider | Stream Link | Divider | Current Page Title

• Home Link is a link to the hub home page.
• Stream Link is a link to the stream page that the current item page is associated with.
• Current Page Title is the title of the current item page, and is not a link.
• Divider is the chevron-right icon from Font Awesome (by default).

The purpose of the breadcrumb component is to allow for easy navigation back to higher levels of the hub front end from the current item page. It also has an SEO benefit, as it helps Google to understand how the hub front end is structured.

Breadcrumbs

This component is displayed on all item pages by default, and appears immediately below the hub navigation component.

DOM structure

Below is the high-level DOM structure of the breadcrumbs component:

<nav aria-label="breadcrumb" class="uf-breadcrumbs-container is-flex is-align-center ">
  <ol class="uf-breadcrumbs">
    
      <li class="uf-breadcrumb-home">
        <a href="https://hub.mycompany.com/">Home</a>
        <i aria-hidden="true" class="uf-breadcrumb-icon fas fa-chevron-right"></i>
      </li>
    
    <li class="uf-breadcrumb-stream">
      <a href="https://hub.mycompany.com/blog/">An Example Blog</a>
      <i aria-hidden="true" class="uf-breadcrumb-icon fas fa-chevron-right"></i>
    </li>

    <li class="uf-breadcrumb-curent-page">An Example of a Blog Article</li>
  </ol>
</nav>

The breadcrumbs described in the snippet above would look like this:

Home > An Example Blog > An Example of a Blog Article

Elements and CSS selectors

The following table lists the elements found in this component, along with their CSS selectors: