Breadcrumb

A breadcrumb provides page context to help users navigate more efficiently and understand where they are in the application hierarchy.

Examples

With dropdown

Props

*required
NameTypeDefaultDescription
aria-labelstring'Breadcrumb'Aria label added to the breadcrumb nav.
childrenReact.ReactNodenullChildren nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem.
classNamestring''Additional classes added to the breadcrumb nav.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet 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.
*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the breadcrumb item.
classNamestring''Additional classes added to the breadcrumb item.
componentReact.ElementType'a'Sets the base component to render. Defaults to <a>
isActivebooleanfalseFlag indicating whether the item is active.
isDropdownbooleanfalseFlag indicating whether the item contains a dropdown.
render(props: BreadcrumbItemRenderArgs) => React.ReactNodeundefinedA render function to render the component inside the breadcrumb item.
showDividerbooleanInternal prop set by Breadcrumb on all but the first crumb
targetstringundefinedTarget for breadcrumb link.
tostringundefinedHREF for breadcrumb link.
*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the breadcrumb title.
classNamestring''Additional classes added to the breadcrumb item.
componentReact.ReactNode'a'Sets the base component to render. Defaults to <a>
showDividerbooleanInternal prop set by Breadcrumb on all but the first crumb
targetstringundefinedTarget for breadcrumb link.
tostringundefinedHREF for breadcrumb link.

CSS variables

Expand or collapse columnSelectorVariableValue

View source on GitHub