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>
<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>
<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>
<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>
<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>
// 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
nav
to denote that it is a navigation landmark. - The Breadcrumb
nav
hasaria-label
set tobreadcrumb
. - The BreadcrumbItem with
isCurrentPage
prop adds thearia-current=page
to the BreadcrumbLink. - The separator has
role
set topresentation
to denote that its for presentation purposes.
Props#
Breadcrumb Props#
colorScheme
colorScheme
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
separator
separator
The visual separator between each breadcrumb item
string | React.ReactElement
size
size
Sizes for Breadcrumb
are not implemented in the default theme. You can extend the theme to implement them.
string
spacing
spacing
The left and right margin applied to the separator
SystemProps["mx"]
variant
variant
Variants for Breadcrumb
are not implemented in the default theme. You can extend the theme to implement them.
string
BreadcrumbItem Props#
isCurrentPage
isCurrentPage
boolean
isLastChild
isLastChild
boolean
separator
separator
The visual separator between each breadcrumb item
string | React.ReactElement
spacing
spacing
The left and right margin applied to the separator
SystemProps["mx"]
BreadcrumbLink Props#
The BreadcrumbLink composes the Link component so you can use all Link props.
isCurrentPage
isCurrentPage
boolean
BreadcrumbSeparator Props#
The BreadcrumbSeparator composes the Box component so you can use all Box props.
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web