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.


ariaLabelstringProvides a label that describes the type of navigation enabled by the component.'Breadcrumbs'

being Item an object with the following properties:

{ href?: string; label: string; }
Array of objects representing the items of the breadcrumbs.-
itemsBeforeCollapsenumberNumber of items before showing a collapsed version of the breadcrumbs. It can't be lower than two (root/collapsed action and current page).4
onItemClicknumberCallback 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.-
showRootbooleanWhen items are collapsed, whether the root item should always be displayed or not.true


Basic usage

Custom navigation

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.

Next.js useRouter