Breadcrumb

Examples

Basic

Without home link

With heading

Props

Name	Type	Required	Default	Description
aria-label	string	No	'Breadcrumb'	Aria label added to the breadcrumb nav.
children	React.ReactNode	No	null	Children nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem.
className	string	No	''	Additional classes added to the breadcrumb nav.
ouiaSafe	No type info	No	true

BreadcrumbItem

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

BreadcrumbHeading

Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the breadcrumb title.
className	string	No	''	Additional classes added to the breadcrumb item.
component	React.ReactNode	No	'a'	Sets the base component to render. Defaults to <a>
showDivider	boolean	No		Internal prop set by Breadcrumb on all but the first crumb
target	string	No	null	Target for breadcrumb link.
to	string	No	null	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

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines