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.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.
Ads via Chakra UI

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.

Editable Example

Separators#

Change the separator used in the breadcrumb by passing a string, like - or an icon.

Editable Example

Using an icon as the separator#

Editable Example

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.

Editable Example

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 nav to denote that it is a navigation landmark.
  • The Breadcrumb nav has aria-label set to breadcrumb.
  • The BreadcrumbItem with isCurrentPage prop adds the aria-current=page to the BreadcrumbLink.
  • The separator has role set to presentation to denote that its for presentation purposes.

Props#

NameTypeDescriptionDefault
colorScheme"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Color Schemes for Breadcrumb are not implemented in the default theme. You can extend the theme to implement them.-
separatorstring | React.ReactElementThe visual separator between each breadcrumb item-
sizestringSizes for Breadcrumb are not implemented in the default theme. You can extend the theme to implement them.-
spacingSystemProps["mx"]The left and right margin applied to the separator-
variantstringVariants for Breadcrumb are not implemented in the default theme. You can extend the theme to implement them.-
NameTypeDescriptionDefault
isCurrentPageboolean-
isLastChildboolean-
separatorstring | React.ReactElementThe visual separator between each breadcrumb item-
spacingSystemProps["mx"]The left and right margin applied to the separator-

The BreadcrumbLink composes the Link component so you can use all Link props.

NameTypeDescriptionDefault
isCurrentPageboolean-

The BreadcrumbSeparator composes the Box component so you can use all Box props.

Edit this page