Breadcrumbs, or a breadcrumb navigation, can help enhance how users navigate to previous page levels of a website, especially if that website has many pages or products.
Chakra UI exports 4 breadcrumb-related components:
Breadcrumb: The parent container for breadcrumbs.BreadcrumbItem: Individual breadcrumb element containing a link and a
divider.BreadcrumbLink: The breadcrumb link.BreadcrumbSeparator: The visual separator between each breadcrumb.Add isCurrentPage prop to the BreadcrumbItem that matches the current path.
When this prop is present, the BreadcrumbItem doesn't have a separator, and
the BreadcrumbLink has aria-current set to page.
Change the separator used in the breadcrumb by passing a string, like - or an
icon.
Breadcrumb composes Box so you can pass all Box props to
change the style of the breadcrumbs. Let's say we need to reduce the fontSize
of the breadcrumbs.
To use the Breadcrumb with a routing Library like Reach Router or React Router,
all you need to do is to pass the as prop to the BreadcrumbLink component.
It'll replace the rendered a tag with Reach's Link.
nav to denote that it's a navigation
landmark.nav has aria-label set to breadcrumb.isCurrentPage prop adds the aria-current=page to
the BreadcrumbLink.role set to presentation to denote that its for
presentation purposes.| Name | Type | Default | Description |
|---|---|---|---|
| separator | string, React.ReactNode | / | The visual separator between the breadcrumb item. |
| spacing | StyledSystem.MarginProps | 0.5rem | The left and right margin applied to the separator. |
| addSeparator | boolean | true | If true, the breadcrumb will add the separator automatically. |
| Name | Type | Default | Description |
|---|---|---|---|
| isCurrentPage | boolean | If true, it indicates that the breadcrumb link is active page, adds aria-current=page and renders a span |
The BreadcrumbLink composes the Link component so you can use all Link props.
The BreadcrumbSeparator composes the Box component so you can use all Box props.