React

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

Examples

Simple breadcrumb

Copied to clipboard
Copied to clipboard
Copied to clipboard

Props

The Breadcrumb component accepts the following props.

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.
ouiaContextnull
ouiaIdnull

The BreadcrumbHeading component accepts the following props.

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>

The BreadcrumbItem component accepts the following props.

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>

CSS variables

--pf-c-breadcrumb__heading--FontSizec_breadcrumb__heading_FontSize0.875rem
--pf-c-breadcrumb__item--FontSizec_breadcrumb__item_FontSize0.875rem
--pf-c-breadcrumb__item--FontWeightc_breadcrumb__item_FontWeight400
--pf-c-breadcrumb__item--LineHeightc_breadcrumb__item_LineHeight1.3
--pf-c-breadcrumb__item--MarginRightc_breadcrumb__item_MarginRight0.5rem
--pf-c-breadcrumb__item-divider--Colorc_breadcrumb__item_divider_Color#8a8d90
--pf-c-breadcrumb__item-divider--FontSizec_breadcrumb__item_divider_FontSize0.875rem
--pf-c-breadcrumb__item-divider--MarginLeftc_breadcrumb__item_divider_MarginLeft0.5rem
--pf-c-breadcrumb__link--FontWeightc_breadcrumb__link_FontWeight400
--pf-c-breadcrumb__link--m-current--Colorc_breadcrumb__link_m_current_Color#151515