Breadcrumb

A breadcrumb is a secondary navigation method that shows where users are in an application, to help them navigate more efficiently.

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-v6-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-v6-c-breadcrumb`	Describes `<nav>` landmark.
`aria-label="[link name]"`	`.pf-v6-c-breadcrumb__link`	If link has no text (icon), add an aria-label.
`aria-current="page"`	`.pf-v6-c-breadcrumb__item`, `.pf-v6-c-breadcrumb__link`	Indicates the current page within a set of pages.

Usage

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

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__item--FontSize	0.75rem
--pf-v6-c-breadcrumb__item--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__item--LineHeight	1.5
--pf-v6-c-breadcrumb__item--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__item--MarginInlineEnd	0.5rem
--pf-v6-c-breadcrumb__item--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__item-divider--Color	(In light theme) #1f1f1f
--pf-v6-c-breadcrumb__item-divider--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd	0.5rem
--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__item-divider--FontSize	var( --pf-t--global--font--size--body--sm)
--pf-v6-c-breadcrumb__item-divider--FontSize var( --pf-t--global--font--size--body--sm) var( --pf-t--global--font--size--body--sm)
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__link--PaddingInlineStart	0.5rem
--pf-v6-c-breadcrumb__link--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__link--PaddingInlineEnd	0.5rem
--pf-v6-c-breadcrumb__link--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__link--Color	(In light theme) #0066cc
--pf-v6-c-breadcrumb__link--Color --pf-t--global--text--color--link--default --pf-t--global--text--color--link--100 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__link--TextDecorationLine	underline
--pf-v6-c-breadcrumb__link--TextDecorationLine --pf-t--global--text-decoration--link--line--default --pf-t--global--text-decoration--line--200 underline
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__link--TextDecorationStyle	solid
--pf-v6-c-breadcrumb__link--TextDecorationStyle --pf-t--global--text-decoration--link--style--default --pf-t--global--text-decoration--style--100 solid
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__link--hover--Color	(In light theme) #004d99
--pf-v6-c-breadcrumb__link--hover--Color --pf-t--global--text--color--link--hover --pf-t--global--text--color--link--200 --pf-t--color--blue--60 #004d99
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__link--hover--TextDecorationLine	underline
--pf-v6-c-breadcrumb__link--hover--TextDecorationLine --pf-t--global--text-decoration--link--line--hover --pf-t--global--text-decoration--line--200 underline
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle	solid
--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle --pf-t--global--text-decoration--link--style--hover --pf-t--global--text-decoration--style--100 solid
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__link--m-current--Color	(In light theme) #151515
--pf-v6-c-breadcrumb__link--m-current--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__link--BackgroundColor	transparent
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__heading--FontSize	var( --pf-t--global--font--size--body--sm)
--pf-v6-c-breadcrumb__heading--FontSize var( --pf-t--global--font--size--body--sm) var( --pf-t--global--font--size--body--sm)
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart	calc(0.5rem * -1)
--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart calc(--pf-t--global--spacer--control--vertical--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd	0.25rem
--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd	calc(0.5rem * -1)
--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd calc(--pf-t--global--spacer--control--vertical--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart	0.25rem
--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link)	--pf-v6-c-breadcrumb__link--PaddingInlineStart	0
	.pf-v6-c-breadcrumb__link:is(:hover, :focus)	--pf-v6-c-breadcrumb__link--Color	(In light theme) #004d99
--pf-v6-c-breadcrumb__link--Color --pf-v6-c-breadcrumb__link--hover--Color --pf-t--global--text--color--link--hover --pf-t--global--text--color--link--200 --pf-t--color--blue--60 #004d99
	.pf-v6-c-breadcrumb__link:is(:hover, :focus)	--pf-v6-c-breadcrumb__link--TextDecorationLine	underline
--pf-v6-c-breadcrumb__link--TextDecorationLine --pf-v6-c-breadcrumb__link--hover--TextDecorationLine --pf-t--global--text-decoration--link--line--hover --pf-t--global--text-decoration--line--200 underline
	.pf-v6-c-breadcrumb__link:is(:hover, :focus)	--pf-v6-c-breadcrumb__link--TextDecorationStyle	solid
--pf-v6-c-breadcrumb__link--TextDecorationStyle --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle --pf-t--global--text-decoration--link--style--hover --pf-t--global--text-decoration--style--100 solid

Edit this page on GitHub