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.
ouiaSafe	No type info	true

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

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines

Breadcrumb

Examples

Basic

Without home link

With heading

With dropdown

Props

Breadcrumb

BreadcrumbItem

BreadcrumbHeading

CSS variables