Skip to content
Patternfly Logo

Examples

Props

NameTypeRequiredDefaultDescription
aria-labelstringNo'Breadcrumb'Aria label added to the breadcrumb nav.
childrenReact.ReactNodeNonullChildren nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem.
classNamestringNo''Additional classes added to the breadcrumb nav.
ouiaSafeNo type infoNotrue
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the breadcrumb item.
classNamestringNo''Additional classes added to the breadcrumb item.
componentReact.ElementTypeNo'a'Sets the base component to render. Defaults to <a>
isActivebooleanNofalseFlag indicating whether the item is active.
showDividerbooleanNoInternal prop set by Breadcrumb on all but the first crumb
targetstringNonullTarget for breadcrumb link.
tostringNonullHREF for breadcrumb link.
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the breadcrumb title.
classNamestringNo''Additional classes added to the breadcrumb item.
componentReact.ReactNodeNo'a'Sets the base component to render. Defaults to <a>
showDividerbooleanNoInternal prop set by Breadcrumb on all but the first crumb
targetstringNonullTarget for breadcrumb link.
tostringNonullHREF for breadcrumb link.

CSS variables

.pf-c-breadcrumb--pf-c-breadcrumb__item--FontSize
0.875rem
.pf-c-breadcrumb--pf-c-breadcrumb__item--LineHeight
1.3
.pf-c-breadcrumb--pf-c-breadcrumb__item--MarginRight
0.5rem
.pf-c-breadcrumb--pf-c-breadcrumb__item-divider--Color
#8a8d90
.pf-c-breadcrumb--pf-c-breadcrumb__item-divider--MarginRight
0.5rem
.pf-c-breadcrumb--pf-c-breadcrumb__item-divider--FontSize
0.875rem
.pf-c-breadcrumb--pf-c-breadcrumb__link--m-current--Color
#151515
.pf-c-breadcrumb--pf-c-breadcrumb__heading--FontSize
0.875rem

View source on GitHub