Breadcrumb

A breadcrumb is a secondary navigation method that shows where users are in an application, to help them navigate more efficiently.

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

Expand or collapse columnSelectorVariableValue
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__item--FontSize
0.75rem
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__item--LineHeight
1.5
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__item--MarginInlineEnd
0.5rem
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__item-divider--Color
(In light theme) #1f1f1f
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd
0.5rem
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__item-divider--FontSize
var( --pf-t--global--font--size--body--sm)
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__link--PaddingInlineStart
0.5rem
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__link--PaddingInlineEnd
0.5rem
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__link--Color
(In light theme) #0066cc
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__link--TextDecorationLine
underline
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__link--TextDecorationStyle
solid
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__link--hover--Color
(In light theme) #004d99
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__link--hover--TextDecorationLine
underline
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle
solid
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__link--m-current--Color
(In light theme) #151515
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__link--BackgroundColor
transparent
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__heading--FontSize
var( --pf-t--global--font--size--body--sm)
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart
calc(0.5rem * -1)
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd
0.25rem
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd
calc(0.5rem * -1)
.pf-v6-c-breadcrumb--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart
0.25rem
.pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link)--pf-v6-c-breadcrumb__link--PaddingInlineStart
0
.pf-v6-c-breadcrumb__link:is(:hover, :focus)--pf-v6-c-breadcrumb__link--Color
(In light theme) #004d99
.pf-v6-c-breadcrumb__link:is(:hover, :focus)--pf-v6-c-breadcrumb__link--TextDecorationLine
underline
.pf-v6-c-breadcrumb__link:is(:hover, :focus)--pf-v6-c-breadcrumb__link--TextDecorationStyle
solid
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.