HTML

ExamplesDocumentationCSS Variables

Examples

Copied to clipboard
Copied to clipboard
Copied to clipboard

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.

CSS Variables

--pf-c-breadcrumb__heading--FontSizec_breadcrumb__heading_FontSize0.875rem
--pf-c-breadcrumb__item--FontSizec_breadcrumb__item_FontSize0.875rem
--pf-c-breadcrumb__item--FontWeightc_breadcrumb__item_FontWeight500
--pf-c-breadcrumb__item--LineHeightc_breadcrumb__item_LineHeight1.3
--pf-c-breadcrumb__item--MarginRightc_breadcrumb__item_MarginRight0.5rem
--pf-c-breadcrumb__item-divider--Colorc_breadcrumb__item_divider_Color#8b8d8f
--pf-c-breadcrumb__item-divider--FontSizec_breadcrumb__item_divider_FontSize0.875rem
--pf-c-breadcrumb__item-divider--MarginLeftc_breadcrumb__item_divider_MarginLeft0.5rem
--pf-c-breadcrumb__link--FontWeightc_breadcrumb__link_FontWeight500
--pf-c-breadcrumb__link--m-current--Colorc_breadcrumb__link_m_current_Color#151515