Breadcrumb

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

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__item--FontSize	0.875rem
--pf-v6-c-breadcrumb__item--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.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	dashed
--pf-v6-c-breadcrumb__link--TextDecorationStyle --pf-t--global--text-decoration--link--style--default --pf-t--global--text-decoration--style--200 dashed
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__link--TextDecorationColor	(In light theme) #8c8c8c
--pf-v6-c-breadcrumb__link--TextDecorationColor --pf-t--global--text-decoration--color--default --pf-t--global--border--color--300 --pf-t--color--gray--45 #8c8c8c
	.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	dashed
--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle --pf-t--global--text-decoration--link--style--hover --pf-t--global--text-decoration--style--200 dashed
	.pf-v6-c-breadcrumb	--pf-v6-c-breadcrumb__link--hover--TextDecorationColor	(In light theme) #4394e5
--pf-v6-c-breadcrumb__link--hover--TextDecorationColor --pf-t--global--text-decoration--color--hover --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5
	.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	0.875rem
--pf-v6-c-breadcrumb__heading--FontSize --pf-v6-c-breadcrumb__item--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.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--plain * -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--plain * -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	dashed
--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--200 dashed
	.pf-v6-c-breadcrumb__link:is(:hover, :focus)	--pf-v6-c-breadcrumb__link--TextDecorationColor	(In light theme) #4394e5
--pf-v6-c-breadcrumb__link--TextDecorationColor --pf-v6-c-breadcrumb__link--hover--TextDecorationColor --pf-t--global--text-decoration--color--hover --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5