Breadcrumb

A breadcrumb provides page context to help users navigate more efficiently and understand where they are in the application hierarchy.

Examples

Basic

Without home link

With heading

With buttons

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-v5-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

Attribute	Applied to	Outcome
`aria-label="[landmark description]"`	`.pf-v5-c-breadcrumb`	Describes `<nav>` landmark.
`aria-label="[link name]"`	`.pf-v5-c-breadcrumb__link`	If link has no text (icon), add an aria-label.
`aria-current="page"`	`.pf-v5-c-breadcrumb__item`, `.pf-v5-c-breadcrumb__link`	Indicates the current page within a set of pages.

Usage

Class	Applied to	Outcome
`.pf-v5-c-breadcrumb`	`<nav>`	Initiates a primary breadcrumb element. Required
`.pf-v5-c-breadcrumb__list`	`<ol>`	Initiates default breadcrumb ordered list.
`.pf-v5-c-breadcrumb__item`	`<li>`	Initiates default breadcrumb list item.
`.pf-v5-c-breadcrumb__item-divider`	`<span>`	Initiates default breadcrumb list item divider.
`.pf-v5-c-breadcrumb__link`	`<a>`, `<button>`	Initiates default breadcrumb list link.
`.pf-v5-c-breadcrumb__title`	`<h1>`	Initiates breadcrumb header.
`.pf-m-current`	`.pf-v5-c-breadcrumb__link`	Modifies to display the list item as the current item.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__item--FontSize	0.875rem
--pf-v5-c-breadcrumb__item--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__item--LineHeight	1.3
--pf-v5-c-breadcrumb__item--LineHeight --pf-v5-global--LineHeight--sm $pf-v5-global--LineHeight--sm 1.3
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__item--MarginRight	0.5rem
--pf-v5-c-breadcrumb__item--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__item-divider--Color	#151515
--pf-v5-c-breadcrumb__item-divider--Color --pf-v5-global--icon--Color--dark $pf-v5-global--icon--Color--dark $pf-v5-color-black-900 #151515
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__item-divider--MarginRight	0.5rem
--pf-v5-c-breadcrumb__item-divider--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__item-divider--FontSize	0.875rem
--pf-v5-c-breadcrumb__item-divider--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__link--Color	#06c
--pf-v5-c-breadcrumb__link--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__link--TextDecoration	none
--pf-v5-c-breadcrumb__link--TextDecoration --pf-v5-global--link--TextDecoration $pf-v5-global--link--TextDecoration none
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__link--hover--Color	#004080
--pf-v5-c-breadcrumb__link--hover--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__link--hover--TextDecoration	underline
--pf-v5-c-breadcrumb__link--hover--TextDecoration --pf-v5-global--link--TextDecoration--hover $pf-v5-global--link--TextDecoration--hover underline
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__link--m-current--Color	#151515
--pf-v5-c-breadcrumb__link--m-current--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__link--BackgroundColor	transparent
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__heading--FontSize	0.875rem
--pf-v5-c-breadcrumb__heading--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__dropdown--MarginTop	calc(0.375rem * -1)
--pf-v5-c-breadcrumb__dropdown--MarginTop calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__dropdown--MarginRight	calc(0.5rem * -1)
--pf-v5-c-breadcrumb__dropdown--MarginRight calc(--pf-v5-c-breadcrumb__item--MarginRight * -1) calc(--pf-v5-global--spacer--sm * -1) calc($pf-v5-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__dropdown--MarginBottom	calc(0.375rem * -1)
--pf-v5-c-breadcrumb__dropdown--MarginBottom calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__dropdown--MarginLeft	calc(0.5rem * -1)
--pf-v5-c-breadcrumb__dropdown--MarginLeft calc(--pf-v5-c-breadcrumb__item-divider--MarginRight * -1) calc(--pf-v5-global--spacer--sm * -1) calc($pf-v5-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-v5-c-breadcrumb	--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight	1.3
--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight --pf-v5-global--LineHeight--sm $pf-v5-global--LineHeight--sm 1.3
	.pf-v5-c-breadcrumb__link:hover	--pf-v5-c-breadcrumb__link--Color	#004080
--pf-v5-c-breadcrumb__link--Color --pf-v5-c-breadcrumb__link--hover--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080
	.pf-v5-c-breadcrumb__link:hover	--pf-v5-c-breadcrumb__link--TextDecoration	underline
--pf-v5-c-breadcrumb__link--TextDecoration --pf-v5-c-breadcrumb__link--hover--TextDecoration --pf-v5-global--link--TextDecoration--hover $pf-v5-global--link--TextDecoration--hover underline

View source on GitHub