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. |
| ouiaSafe | No type info | true |
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
| .pf-c-breadcrumb | --pf-c-breadcrumb__item--FontSize | 0.875rem | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__item--LineHeight | 1.3 | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__item--MarginRight | 0.5rem | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__item-divider--Color | #8a8d90 | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__item-divider--MarginRight | 0.5rem | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__item-divider--FontSize | 0.875rem | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__link--Color | #06c | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__link--TextDecoration | none | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__link--hover--Color | #004080 | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__link--hover--TextDecoration | underline | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__link--m-current--Color | #151515 | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__heading--FontSize | 0.875rem | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__dropdown--MarginTop | calc(0.375rem * -1) | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__dropdown--MarginRight | calc(0.5rem * -1) | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__dropdown--MarginBottom | calc(0.375rem * -1) | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__dropdown--MarginLeft | calc(0.5rem * -1) | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight | 1.3 | |
| .pf-c-breadcrumb__link:hover | --pf-c-breadcrumb__link--Color | #004080 | |
| .pf-c-breadcrumb__link:hover | --pf-c-breadcrumb__link--TextDecoration | underline | |
View source on GitHub
