A React component used for navigation, with each item acting as a link
npm install @chakra-ui/breadcrumbBreadcrumbs help users visualize their current location in relation to the rest
of the website or application by showing the hierarchy of pages.
``sh
yarn add @chakra-ui/breadcrumb
npm i @chakra-ui/breadcrumb
`
Chakra UI exports 3 breadcrumb related components:
- Breadcrumb: The parent container for breadcrumbs.BreadcrumbItem
- : Individual breadcrumb element containing a link and aBreadcrumbLink
divider.
- : The breadcrumb link.
`js`
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "@chakra-ui/react"
Add isCurrentPage prop to the BreadcrumbItem that matches the current path.BreadcrumbItem
When this prop is present, the doesn't have a separator, andBreadcrumbLink
the has aria-current set to page.
`jsx
`
Change the separator used in the breadcrumb by passing a string, like - or any
react element (e.g. an icon)
`jsx
`
`jsx
separator={
>
``