Examples
Props
Breadcrumb
Name | Type | Required | Default | Description |
---|---|---|---|---|
aria-label | string | No | 'Breadcrumb' | Aria label added to the breadcrumb nav. |
children | React.ReactNode | No | null | Children nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem. |
className | string | No | '' | Additional classes added to the breadcrumb nav. |
ouiaSafe | No type info | No | true |
BreadcrumbItem
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | null | Content rendered inside the breadcrumb item. |
className | string | No | '' | Additional classes added to the breadcrumb item. |
component | React.ElementType | No | 'a' | Sets the base component to render. Defaults to <a> |
isActive | boolean | No | false | Flag indicating whether the item is active. |
render | (props: BreadcrumbItemRenderArgs) => React.ReactNode | No | null | A render function to render the component inside the breadcrumb item. |
showDivider | boolean | No | Internal prop set by Breadcrumb on all but the first crumb | |
target | string | No | null | Target for breadcrumb link. |
to | string | No | null | HREF for breadcrumb link. |
BreadcrumbHeading
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | null | Content rendered inside the breadcrumb title. |
className | string | No | '' | Additional classes added to the breadcrumb item. |
component | React.ReactNode | No | 'a' | Sets the base component to render. Defaults to <a> |
showDivider | boolean | No | Internal prop set by Breadcrumb on all but the first crumb | |
target | string | No | null | Target for breadcrumb link. |
to | string | No | null | 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