PF Next

Breadcrumb

<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
  <ol class="pf-c-breadcrumb__list">
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link">
        Section Home
      </a>
      <span class="pf-c-breadcrumb__item-divider">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </span>
    </li>
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link">
        Section Title
      </a>
      <span class="pf-c-breadcrumb__item-divider">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </span>
    </li>
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link">
        Section Title
      </a>
      <span class="pf-c-breadcrumb__item-divider">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </span>
    </li>
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link pf-m-current" aria-current="page">
        Section Landing
      </a>
    </li>
  </ol>
</nav>

Breadcrumb without Home Link

<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
  <ol class="pf-c-breadcrumb__list">
    <li class="pf-c-breadcrumb__item">
      Section Home
      <span class="pf-c-breadcrumb__item-divider">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </span>
    </li>
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link">
        Section Title
      </a>
      <span class="pf-c-breadcrumb__item-divider">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </span>
    </li>
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link">
        Section Title
      </a>
      <span class="pf-c-breadcrumb__item-divider">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </span>
    </li>
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link">
        Section Title
      </a>
      <span class="pf-c-breadcrumb__item-divider">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </span>
    </li>
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link">
        Section Title
      </a>
      <span class="pf-c-breadcrumb__item-divider">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </span>
    </li>
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link pf-m-current" aria-current="page">
        Section Landing
      </a>
    </li>
  </ol>
</nav>

Breadcrumb with Heading

<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
  <ol class="pf-c-breadcrumb__list">
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link">
        Section Home
      </a>
      <span class="pf-c-breadcrumb__item-divider">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </span>
    </li>
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link">
        Section Title
      </a>
      <span class="pf-c-breadcrumb__item-divider">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </span>
    </li>
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link">
        Section Title
      </a>
      <span class="pf-c-breadcrumb__item-divider">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </span>
    </li>
    <li class="pf-c-breadcrumb__item">
      <a href="#" class="pf-c-breadcrumb__link">
        Section Title
      </a>
      <span class="pf-c-breadcrumb__item-divider">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </span>
    </li>
    <li class="pf-c-breadcrumb__item">
      <h1 class="pf-c-breadcrumb__heading">
        <a href="#" class="pf-c-breadcrumb__link pf-m-current" aria-current="page">
          Section Title
        </a>
      </h1>
    </li>
  </ol>
</nav>

Documentation

Overview

A breadcrumb is a list of links to display a user's navigational hierarchy. The last item of the breadcrumb list indicates the current page's location.

  • .pf-c-breadcrumb__list - Default breadcrumb navigation. Provides links to previous navigation pages and also shows the current page's location.

In the event that a page does not have a traditional <h1> page title, a heading can be included in the breadcrumbs and an optional link within.

Accessibility

Attribute Applied To Outcome
aria-label="[landmark description]" .pf-c-breadcrumb Describes <nav> landmark.
aria-label="[link name]" .pf-c-breadcrumb__link If link has no text (icon), add an aria-label.
aria-current="page" .pf-c-breadcrumb__item, .pf-c-breadcrumb__link Indicates the current page within a set of pages.

Usage

Class Applied To Outcome
.pf-c-breadcrumb <nav> Initiates a primary breadcrumb element. Required
.pf-c-breadcrumb__list <ol> Initiates default breadcrumb ordered list.
.pf-c-breadcrumb__item <li> Initiates default breadcrumb list item.
.pf-c-breadcrumb__item-divider <span> Initiates default breadcrumb list item divider.
.pf-c-breadcrumb__link <a> Initiates default breadcrumb list link.
.pf-c-breadcrumb__title <h1> Initiates breadcrumb header.
.pf-m-current .pf-c-breadcrumb__link Modifies to display the list item as the current item.