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

Props

*required
Name	Type	Default	Description
aria-label	string	'Breadcrumb'	Aria label added to the breadcrumb nav.
children	React.ReactNode	null	Children nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem.
className	string	''	Additional classes added to the breadcrumb nav.
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	true	Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

BreadcrumbItem

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the breadcrumb item.
className	string	''	Additional classes added to the breadcrumb item.
component	React.ElementType	'a'	Sets the base component to render. Defaults to <a>
isActive	boolean	false	Flag indicating whether the item is active.
isDropdown	boolean	false	Flag indicating whether the item contains a dropdown.
render	(props: BreadcrumbItemRenderArgs) => React.ReactNode	undefined	A render function to render the component inside the breadcrumb item.
showDivider	boolean		Internal prop set by Breadcrumb on all but the first crumb
target	string	undefined	Target for breadcrumb link.
to	string	undefined	HREF for breadcrumb link.

BreadcrumbHeading

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the breadcrumb title.
className	string	''	Additional classes added to the breadcrumb item.
component	React.ReactNode	'a'	Sets the base component to render. Defaults to <a>
showDivider	boolean		Internal prop set by Breadcrumb on all but the first crumb
target	string	undefined	Target for breadcrumb link.
to	string	undefined	HREF for breadcrumb link.

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

View source on GitHub

Breadcrumb

Examples

Basic

Without home link

With heading

With dropdown

Props

Breadcrumb

BreadcrumbItem

BreadcrumbHeading

CSS variables