Color Schemes for Breadcrumb are not implemented in the default theme. You can extend the theme to implement them.
Breadcrumb
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.
Import#
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.
import {Breadcrumb,BreadcrumbItem,BreadcrumbLink,BreadcrumbSeparator,} from "@chakra-ui/react"
Usage#
Add isCurrentPage prop to the BreadcrumbItem that matches the current path.
When this prop is present, the BreadcrumbLink renders a span with
aria-current set to page instead of an anchor element.
<Breadcrumb><BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbItem><BreadcrumbLink href="#">Docs</BreadcrumbLink></BreadcrumbItem><BreadcrumbItem isCurrentPage><BreadcrumbLink href="#">Breadcrumb</BreadcrumbLink></BreadcrumbItem></Breadcrumb>
Separators#
Change the separator used in the breadcrumb by passing a string, like - or an
icon.
<Breadcrumb separator="-"><BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbItem><BreadcrumbLink href="#">About</BreadcrumbLink></BreadcrumbItem><BreadcrumbItem isCurrentPage><BreadcrumbLink href="#">Contact</BreadcrumbLink></BreadcrumbItem></Breadcrumb>
Using an icon as the separator#
<Breadcrumb spacing="8px" separator={<ChevronRightIcon color="gray.500" />}><BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbItem><BreadcrumbLink href="#">About</BreadcrumbLink></BreadcrumbItem><BreadcrumbItem isCurrentPage><BreadcrumbLink href="#">Contact</BreadcrumbLink></BreadcrumbItem></Breadcrumb>
Composition#
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.
<Breadcrumb fontWeight="medium" fontSize="sm"><BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbItem><BreadcrumbLink href="#">About</BreadcrumbLink></BreadcrumbItem><BreadcrumbItem isCurrentPage><BreadcrumbLink href="#">Current</BreadcrumbLink></BreadcrumbItem></Breadcrumb>
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 BreadcrumbLink component.
It'll replace the rendered a tag with Reach's Link.
// import { Link } from "@reach/router"<Breadcrumb><BreadcrumbItem><BreadcrumbLink as={Link} to="#">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbItem><BreadcrumbLink as={Link} to="#">About</BreadcrumbLink></BreadcrumbItem><BreadcrumbItem isCurrentPage><BreadcrumbLink>Contact</BreadcrumbLink></BreadcrumbItem></Breadcrumb>
Accessibility#
- The Breadcrumbs are rendered in a
navto denote that it is a navigation landmark. - The Breadcrumb
navhasaria-labelset tobreadcrumb. - The BreadcrumbItem with
isCurrentPageprop adds thearia-current=pageto the BreadcrumbLink. - The separator has
roleset topresentationto denote that its for presentation purposes.
Props#
Breadcrumb Props#
colorScheme
colorSchemeDescription
Type
stringseparator
separatorDescription
The visual separator between each breadcrumb item
Type
string | React.ReactElementsize
sizeType
stringspacing
spacingDescription
The left and right margin applied to the separator
Type
SystemProps["mx"]variant
variantType
stringBreadcrumbItem Props#
isCurrentPage
isCurrentPageType
booleanisLastChild
isLastChildType
booleanseparator
separatorDescription
The visual separator between each breadcrumb item
Type
string | React.ReactElementspacing
spacingDescription
The left and right margin applied to the separator
Type
SystemProps["mx"]BreadcrumbLink Props#
The BreadcrumbLink composes the Link component so you can use all Link props.
isCurrentPage
isCurrentPageType
booleanBreadcrumbSeparator Props#
The BreadcrumbSeparator composes the Box component so you can use all Box props.