Skip to content
PatternFly logo

Breadcrumb

A breadcrumb provides page context to help users navigate more efficiently and understand where they are in the application hierarchy.

Examples

With dropdown

Props

*required
NameTypeDefaultDescription
aria-labelstring'Breadcrumb'Aria label added to the breadcrumb nav.
childrenReact.ReactNodenullChildren nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem.
classNamestring''Additional classes added to the breadcrumb nav.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet 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.
*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the breadcrumb item.
classNamestring''Additional classes added to the breadcrumb item.
componentReact.ElementType'a'Sets the base component to render. Defaults to <a>
isActivebooleanfalseFlag indicating whether the item is active.
isDropdownbooleanfalseFlag indicating whether the item contains a dropdown.
render(props: BreadcrumbItemRenderArgs) => React.ReactNodeundefinedA render function to render the component inside the breadcrumb item.
showDividerbooleanInternal prop set by Breadcrumb on all but the first crumb
targetstringundefinedTarget for breadcrumb link.
tostringundefinedHREF for breadcrumb link.
*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the breadcrumb title.
classNamestring''Additional classes added to the breadcrumb item.
componentReact.ReactNode'a'Sets the base component to render. Defaults to <a>
showDividerbooleanInternal prop set by Breadcrumb on all but the first crumb
targetstringundefinedTarget for breadcrumb link.
tostringundefinedHREF 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