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

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


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