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-v5-c-breadcrumb | --pf-v5-c-breadcrumb__item--FontSize | 0.875rem | ||
--pf-v5-c-breadcrumb__item--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__item--LineHeight | 1.3 | ||
--pf-v5-c-breadcrumb__item--LineHeight --pf-v5-global--LineHeight--sm $pf-v5-global--LineHeight--sm 1.3 | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__item--MarginRight | 0.5rem | ||
--pf-v5-c-breadcrumb__item--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__item-divider--Color | #151515 | ||
--pf-v5-c-breadcrumb__item-divider--Color --pf-v5-global--icon--Color--dark $pf-v5-global--icon--Color--dark $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__item-divider--MarginRight | 0.5rem | ||
--pf-v5-c-breadcrumb__item-divider--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__item-divider--FontSize | 0.875rem | ||
--pf-v5-c-breadcrumb__item-divider--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__link--Color | #06c | ||
--pf-v5-c-breadcrumb__link--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__link--TextDecoration | none | ||
--pf-v5-c-breadcrumb__link--TextDecoration --pf-v5-global--link--TextDecoration $pf-v5-global--link--TextDecoration none | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__link--hover--Color | #004080 | ||
--pf-v5-c-breadcrumb__link--hover--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__link--hover--TextDecoration | underline | ||
--pf-v5-c-breadcrumb__link--hover--TextDecoration --pf-v5-global--link--TextDecoration--hover $pf-v5-global--link--TextDecoration--hover underline | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__link--m-current--Color | #151515 | ||
--pf-v5-c-breadcrumb__link--m-current--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__link--BackgroundColor | transparent | ||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__heading--FontSize | 0.875rem | ||
--pf-v5-c-breadcrumb__heading--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__dropdown--MarginTop | calc(0.375rem * -1) | ||
--pf-v5-c-breadcrumb__dropdown--MarginTop calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1) | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__dropdown--MarginRight | calc(0.5rem * -1) | ||
--pf-v5-c-breadcrumb__dropdown--MarginRight calc(--pf-v5-c-breadcrumb__item--MarginRight * -1) calc(--pf-v5-global--spacer--sm * -1) calc($pf-v5-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1) | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__dropdown--MarginBottom | calc(0.375rem * -1) | ||
--pf-v5-c-breadcrumb__dropdown--MarginBottom calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1) | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__dropdown--MarginLeft | calc(0.5rem * -1) | ||
--pf-v5-c-breadcrumb__dropdown--MarginLeft calc(--pf-v5-c-breadcrumb__item-divider--MarginRight * -1) calc(--pf-v5-global--spacer--sm * -1) calc($pf-v5-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1) | ||||
| .pf-v5-c-breadcrumb | --pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight | 1.3 | ||
--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight --pf-v5-global--LineHeight--sm $pf-v5-global--LineHeight--sm 1.3 | ||||
| .pf-v5-c-breadcrumb__link:hover | --pf-v5-c-breadcrumb__link--Color | #004080 | ||
--pf-v5-c-breadcrumb__link--Color --pf-v5-c-breadcrumb__link--hover--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-breadcrumb__link:hover | --pf-v5-c-breadcrumb__link--TextDecoration | underline | ||
--pf-v5-c-breadcrumb__link--TextDecoration --pf-v5-c-breadcrumb__link--hover--TextDecoration --pf-v5-global--link--TextDecoration--hover $pf-v5-global--link--TextDecoration--hover underline | ||||
View source on GitHub
