| Name | Type | Description | Default |
|---|---|---|---|
| ariaLabel | string | Provides a label that describes the type of navigation enabled by the component. | 'Breadcrumbs' |
Required items | Item[]being {
href?: string;
label: string;
} | Array of objects representing the items of the breadcrumbs. | - |
| itemsBeforeCollapse | number | Number of items before showing a collapsed version of the breadcrumbs. It can't be lower than two (root/collapsed action and current page). | 4 |
| onItemClick | (value: string) => void | Callback for custom navigation with third-party libraries such as Next (useRouter) or React Router (useNavigate). This function will be called when an item is clicked, receiving its href as a parameter. | - |
| showRoot | boolean | When items are collapsed, whether the root item should always be displayed or not. | true |
() => { const items = [ { label: "Select component", href: "/components/select", }, { label: "Code", href: "/components/select/code", }, { label: "Examples", href: "/components/select/code/#examples", }, { label: "Uncontrolled", } ]; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcBreadcrumbs items={items} /> </DxcInset> ); }
There are many React based routers, unfortunately all with different APIs.
As we explained above, the onItemClick prop is a callback that will be called when an item is clicked, receiving its href as a parameter. You can take advantage of this prop to navigate programmatically with third-party libraries hooks or functions.
() => { const router = useRouter(); const handleClick = (href) => { router.push(href); }; const items = [ { label: "Select component", href: "/components/select", }, { label: "Code", href: "/components/select/code", }, { label: "Examples", href: "/components/select/code/#examples", }, { label: "Uncontrolled", } ]; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcBreadcrumbs items={items} onItemClick={handleClick} /> </DxcInset> ); }