HTML

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

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