React

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.ReactNodenullChildren nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem.
classNamestring''Additional classes added to the breadcrumb nav.
aria-labelstring'Breadcrumb'Aria label added to the breadcrumb nav.
ouiaContextnullnull
ouiaIdnullnull
BreadcrumbItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the breadcrumb item.
classNamestring''Additional classes added to the breadcrumb item.
tostringnullHREF for breadcrumb link.
isActivebooleanfalseFlag indicating whether the item is active.
targetstringnullTarget for breadcrumb link.
componentReact.ReactNode'a'Sets the base component to render. Defaults to <a>
BreadcrumbHeading properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the breadcrumb title.
classNamestring''Additional classes added to the breadcrumb item.
tostringnullHREF for breadcrumb link.
targetstringnullTarget for breadcrumb link.
componentReact.ReactNode'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