Breadcrumbs
A breadcrumbs trail is a secondary form of navigation that allows users to keep track and maintain awareness of their location as they move through a hierarchically structured web application.
| 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: "Specifications", href: "/components/select/specifications", }, { label: "Design Tokens", href: "/components/select/specifications/#design-tokens", }, { label: "Color", } ]; return ( <DxcInset space="2rem"> <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: "Specifications", href: "/components/select/specifications", }, { label: "Design Tokens", href: "/components/select/specifications/#design-tokens", }, { label: "Color", } ]; return ( <DxcInset space="2rem"> <DxcBreadcrumbs items={items} onItemClick={handleClick} /> </DxcInset> ); }