Breadcrumb

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.

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, obviously.
• BreadcrumbSeparator: The visual separator between each breadcrumb

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from "@chakra-ui/core";

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">About</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/contact">Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Using an icon as the separator#

<Breadcrumb
  spacing="8px"
  separator={<Icon color="gray.300" name="chevron-right" />}
>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/about">About</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/contact">Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Styling the Separator#

To gain control over the style of the breadcrumb separator. Set addSeparator to false, and manually add the BreadcrumbSeparator as a child of the BreadcrumbItem.

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 addSeparator={false}>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Breadcrumb 1</BreadcrumbLink>
    <BreadcrumbSeparator color="tomato" fontSize="10px" fontWeight="bold" />
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Breadcrumb 2</BreadcrumbLink>
    <BreadcrumbSeparator color="firebrick" fontSize="20px" />
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="#">Breadcrumb 3</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 increase the fontSize of the breadcrumbs.

<Breadcrumb fontWeight="medium" fontSize="sm">
  <BreadcrumbItem>
    <BreadcrumbLink href="/google">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/about">About</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/current">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 with Reach's Link.

// import { Link } from "@reach/router"
<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink as={Link} to="/">
      Home
    </BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink as={Link} to="/about">
      About
    </BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink>Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Accessibility#

• The Breadcrumbs are rendered in a nav to denote that it's 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 all Link props.

BreadcrumbSeparator Props#

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