Breadcrumbs, or a breadcrumb navigation, can help to 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, obviously.
BreadcrumbSeparator: The visual separator between each breadcrumb
isCurrentPage prop to the
BreadcrumbItem that matches the current path.
When this prop is present, the
BreadcrumbItem doesn't have a separator, and
aria-current set to
Change the separator used in the breadcrumb by passing a string, like
- or an
Using an icon as the separator#
Styling the Separator#
To gain control over the style of the breadcrumb separator. Set
to false, and manually add the
BreadcrumbSeparator as a child of the
You can then pass the style props to change the styling. You can also override
the content of the
BreadcrumbSeparator by passing its children.
Breadcrumb composes Box so you can pass all
Box props to change the
style of the breadcrumbs. Let's say we need to increase the
fontSize of the
Usage with Routing Library#
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
It'll replace the rendered
a tag with with Reach's Link.
- The Breadcrumbs are rendered in a
navto denote that it's a navigation landmark.
- The Breadcrumb
- The BreadcrumbItem with
isCurrentPageprop adds the
aria-current=pageto the BreadcrumbLink.
- The separator has
presentationto denote that its for presentation purposes.
|separator||The visual separator between the breadcrumb item.|
|spacing||The left and right margin applied to the separator.|
The BreadcrumbLink composes the Link component so you can all Link props.
The BreadcrumbSeparator composes the Box component so you can all Box props.
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2020 Segun Adebayo