HTML

Breadcrumb

ExamplesDocumentationCSS Variables

Examples

Documentation

Overiew

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__heading--FontSizec_breadcrumb__heading_FontSize
0.875rem
--pf-c-breadcrumb__item-divider--Colorc_breadcrumb__item_divider_Color
#8a8d90
--pf-c-breadcrumb__item-divider--FontSizec_breadcrumb__item_divider_FontSize
0.875rem
--pf-c-breadcrumb__item-divider--MarginLeftc_breadcrumb__item_divider_MarginLeft
0.5rem
--pf-c-breadcrumb__item--FontSizec_breadcrumb__item_FontSize
0.875rem
--pf-c-breadcrumb__item--FontWeightc_breadcrumb__item_FontWeight
400
--pf-c-breadcrumb__item--LineHeightc_breadcrumb__item_LineHeight
1.3
--pf-c-breadcrumb__item--MarginRightc_breadcrumb__item_MarginRight
0.5rem
--pf-c-breadcrumb__link--FontWeightc_breadcrumb__link_FontWeight
400
--pf-c-breadcrumb__link--m-current--Colorc_breadcrumb__link_m_current_Color
#151515