This reference guide describes the breadcrumb navigation component. This component appears on pages with the item page page type.
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.
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-righticon 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.
This component is displayed on all item pages by default, and appears immediately below the hub navigation component.
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:
The following table lists the elements found in this component, along with their CSS selectors:
|Element||Container CSS Selector||Element CSS Selector||HTML Element||Notes|
|Breadcrumb Home Link||Links to the hub home page.|
|Breadcrumb Stream Link||Links to the originating stream page for the current item page.|
|Breadcrumb Current Page||Same as the current page's |
Updated about 3 years ago