Skip to Content
Patternfly Logo

Breadcrumb

Breadcrumbs act as a resource to help users navigate more efficiently and provide context to help users understand where they are in the application hierarchy. Use breadcrumbs in addition to your global navigation to display a user's location in the application. Related design guidelines: Navigation system

ExamplesDocumentationCSS Variables

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--FontSizec_breadcrumb__item_FontSize
0.875rem
.pf-c-breadcrumb--pf-c-breadcrumb__item--LineHeightc_breadcrumb__item_LineHeight
1.3
.pf-c-breadcrumb--pf-c-breadcrumb__item--MarginRightc_breadcrumb__item_MarginRight
0.5rem
.pf-c-breadcrumb--pf-c-breadcrumb__item-divider--Colorc_breadcrumb__item_divider_Color
#8a8d90
.pf-c-breadcrumb--pf-c-breadcrumb__item-divider--MarginRightc_breadcrumb__item_divider_MarginRight
0.5rem
.pf-c-breadcrumb--pf-c-breadcrumb__item-divider--FontSizec_breadcrumb__item_divider_FontSize
0.875rem
.pf-c-breadcrumb--pf-c-breadcrumb__link--m-current--Colorc_breadcrumb__link_m_current_Color
#151515
.pf-c-breadcrumb--pf-c-breadcrumb__heading--FontSizec_breadcrumb__heading_FontSize
0.875rem