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 BreadcrumbItem doesn't have a separator, and the BreadcrumbLink has aria-current set to page.

<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 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#

Breadcrumb Props#

BreadcrumbItem Props#

BreadcrumbLink Props#

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

BreadcrumbSeparator Props#

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