Skip to Content
Patternfly Logo

Breadcrumb

Breadcrumbs act as a resource to help users navigate more efficiently and provide context to help users understand where they are in the application hierarchy. Use breadcrumbs in addition to your global navigation to display a user's location in the application. Related design guidelines: Navigation system

ExamplesPropsCSS Variables

Props

Breadcrumb properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullChildren nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem.
classNamestringNo''Additional classes added to the breadcrumb nav.
aria-labelstringNo'Breadcrumb'Aria label added to the breadcrumb nav.
ouiaContextNonull
ouiaIdNonull
BreadcrumbItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the breadcrumb item.
classNamestringNo''Additional classes added to the breadcrumb item.
tostringNonullHREF for breadcrumb link.
isActivebooleanNofalseFlag indicating whether the item is active.
targetstringNonullTarget for breadcrumb link.
componentReact.ReactNodeNo'a'Sets the base component to render. Defaults to <a>
BreadcrumbHeading properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the breadcrumb title.
classNamestringNo''Additional classes added to the breadcrumb item.
tostringNonullHREF for breadcrumb link.
targetstringNonullTarget for breadcrumb link.
componentReact.ReactNodeNo'a'Sets the base component to render. Defaults to <a>

CSS Variables

--pf-c-breadcrumb__heading--FontSizec_breadcrumb__heading_FontSize
0.875rem
--pf-c-breadcrumb__item-divider--Colorc_breadcrumb__item_divider_Color
#8a8d90
--pf-c-breadcrumb__item-divider--FontSizec_breadcrumb__item_divider_FontSize
0.875rem
--pf-c-breadcrumb__item-divider--MarginLeftc_breadcrumb__item_divider_MarginLeft
0.5rem
--pf-c-breadcrumb__item--FontSizec_breadcrumb__item_FontSize
0.875rem
--pf-c-breadcrumb__item--FontWeightc_breadcrumb__item_FontWeight
400
--pf-c-breadcrumb__item--LineHeightc_breadcrumb__item_LineHeight
1.3
--pf-c-breadcrumb__item--MarginRightc_breadcrumb__item_MarginRight
0.5rem
--pf-c-breadcrumb__link--FontWeightc_breadcrumb__link_FontWeight
400
--pf-c-breadcrumb__link--m-current--Colorc_breadcrumb__link_m_current_Color
#151515