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 |
|---|
