Examples
Props
Breadcrumb
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | 'Breadcrumb' | Aria label added to the breadcrumb nav. |
| children | React.ReactNode | null | Children nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem. |
| className | string | '' | Additional classes added to the breadcrumb nav. |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | true | Set 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. |
BreadcrumbItem
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the breadcrumb item. |
| className | string | '' | Additional classes added to the breadcrumb item. |
| component | React.ElementType | 'a' | Sets the base component to render. Defaults to <a> |
| isActive | boolean | false | Flag indicating whether the item is active. |
| isDropdown | boolean | false | Flag indicating whether the item contains a dropdown. |
| render | (props: BreadcrumbItemRenderArgs) => React.ReactNode | undefined | A render function to render the component inside the breadcrumb item. |
| showDivider | boolean | Internal prop set by Breadcrumb on all but the first crumb | |
| target | string | undefined | Target for breadcrumb link. |
| to | string | undefined | HREF for breadcrumb link. |
BreadcrumbHeading
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the breadcrumb title. |
| className | string | '' | Additional classes added to the breadcrumb item. |
| component | React.ReactNode | 'a' | Sets the base component to render. Defaults to <a> |
| showDivider | boolean | Internal prop set by Breadcrumb on all but the first crumb | |
| target | string | undefined | Target for breadcrumb link. |
| to | string | undefined | HREF for breadcrumb link. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .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 | ||
| ||||