Breadcrumb
Breadcrumbs act as a resource to help users navigate more efficiently and provide context to help users understand where they are in the application hierarchy. Use breadcrumbs in addition to your global navigation to display a user's location in the application. Related design guidelines: Navigation system
ExamplesPropsCSS VariablesProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| 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. |
| aria-label | string | No | 'Breadcrumb' | Aria label added to the breadcrumb nav. |
| 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. |
| to | string | No | null | HREF for breadcrumb link. |
| isActive | boolean | No | false | Flag indicating whether the item is active. |
| target | string | No | null | Target for breadcrumb link. |
| component | React.ReactNode | No | 'a' | Sets the base component to render. Defaults to <a> |
| 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. |
| to | string | No | null | HREF for breadcrumb link. |
| target | string | No | null | Target for breadcrumb link. |
| component | React.ReactNode | No | 'a' | Sets the base component to render. Defaults to <a> |
CSS Variables
| .pf-c-breadcrumb | --pf-c-breadcrumb__item--FontSize | 0.875rem | ||
| .pf-c-breadcrumb | --pf-c-breadcrumb__item--FontWeight | 500 | ||
| .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--FontWeight | 500 | ||
| .pf-c-breadcrumb | --pf-c-breadcrumb__link--m-current--Color | #151515 | ||
| .pf-c-breadcrumb | --pf-c-breadcrumb__heading--FontSize | 0.875rem | ||
| .pf-m-redhat-font .pf-c-breadcrumb | --pf-c-breadcrumb__link--FontWeight | 400 | ||
| .pf-m-redhat-font .pf-c-breadcrumb | --pf-c-breadcrumb__item--FontWeight | 400 | ||
