Skip to content
Patternfly Logo

Breadcrumb

Examples

With dropdown

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.
isDropdownbooleanNofalseFlag indicating whether the item contains a dropdown.
render(props: BreadcrumbItemRenderArgs) => React.ReactNodeNonullA render function to render the component inside the breadcrumb item.
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--Color
#06c
.pf-c-breadcrumb--pf-c-breadcrumb__link--TextDecoration
none
.pf-c-breadcrumb--pf-c-breadcrumb__link--hover--Color
#004080
.pf-c-breadcrumb--pf-c-breadcrumb__link--hover--TextDecoration
underline
.pf-c-breadcrumb--pf-c-breadcrumb__link--m-current--Color
#151515
.pf-c-breadcrumb--pf-c-breadcrumb__heading--FontSize
0.875rem
.pf-c-breadcrumb--pf-c-breadcrumb__dropdown--MarginTop
calc(0.375rem * -1)
.pf-c-breadcrumb--pf-c-breadcrumb__dropdown--MarginRight
calc(0.5rem * -1)
.pf-c-breadcrumb--pf-c-breadcrumb__dropdown--MarginBottom
calc(0.375rem * -1)
.pf-c-breadcrumb--pf-c-breadcrumb__dropdown--MarginLeft
calc(0.5rem * -1)
.pf-c-breadcrumb--pf-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight
1.3
.pf-c-breadcrumb__link:hover--pf-c-breadcrumb__link--Color
#004080
.pf-c-breadcrumb__link:hover--pf-c-breadcrumb__link--TextDecoration
underline

View source on GitHub