Patternfly Logo

Breadcrumb

Examples

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 is the default breadcrumb navigation. It 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

AttributeApplied toOutcome
aria-label="[landmark description]".pf-c-breadcrumbDescribes <nav> landmark.
aria-label="[link name]".pf-c-breadcrumb__linkIf link has no text (icon), add an aria-label.
aria-current="page".pf-c-breadcrumb__item, .pf-c-breadcrumb__linkIndicates the current page within a set of pages.

Usage

ClassApplied toOutcome
.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__linkModifies to display the list item as the current item.

CSS variables

.pf-c-breadcrumb--pf-c-breadcrumb__item--FontSize
0.875rem
.pf-c-breadcrumb--pf-c-breadcrumb__item--LineHeight
1.3
.pf-c-breadcrumb--pf-c-breadcrumb__item--MarginRight
0.5rem
.pf-c-breadcrumb--pf-c-breadcrumb__item-divider--Color
#8a8d90
.pf-c-breadcrumb--pf-c-breadcrumb__item-divider--MarginRight
0.5rem
.pf-c-breadcrumb--pf-c-breadcrumb__item-divider--FontSize
0.875rem
.pf-c-breadcrumb--pf-c-breadcrumb__link--m-current--Color
#151515
.pf-c-breadcrumb--pf-c-breadcrumb__heading--FontSize
0.875rem

View source on Github