Breadcrumb

Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website.

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>

Using a separator in last item

If you want to have a BreadcrumbSeparator in the last item of the Breadcrumb you have different ways to achieve it. But to avoid the 'React does not recognize the isLastChild prop on a DOM element.' error you can not simply add the separator directly in the Breadcrumb.

The clean way to achieve it is to put the separator in the last BreadcrumbItem. Feel free to also inspect the example below with the browsers dev tools.

<Box> <Breadcrumb> <BreadcrumbItem> <BreadcrumbLink href="">Page 1</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbItem> <BreadcrumbLink href="">Page 2</BreadcrumbLink> </BreadcrumbItem> {/* this will generate a span in the ol HTML tag which causes the error: */} {/* <BreadcrumbSeparator /> */} </Breadcrumb> {/* preferred solution: */} <Breadcrumb pt="3"> <BreadcrumbItem> <BreadcrumbLink href="">Page 1</BreadcrumbLink> </BreadcrumbItem> {/* this creates the exact same HTML as for page 1 */} <BreadcrumbItem> <BreadcrumbLink href="">Page 2</BreadcrumbLink> <BreadcrumbSeparator /> </BreadcrumbItem> </Breadcrumb> <Breadcrumb pt="3"> <BreadcrumbItem> <BreadcrumbLink href="">Page 1</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbItem> <BreadcrumbLink href="">Page 2</BreadcrumbLink> </BreadcrumbItem> {/* this works too, but creates an additional empty li HTML tag */} <BreadcrumbItem /> </Breadcrumb> </Box>

<Box>
  <Breadcrumb>
    <BreadcrumbItem>
      <BreadcrumbLink href="">Page 1</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink href="">Page 2</BreadcrumbLink>
    </BreadcrumbItem>
    {/* this will generate a span in the ol HTML tag which causes the error: */}
    {/* <BreadcrumbSeparator /> */}
  </Breadcrumb>

  {/* preferred solution: */}
  <Breadcrumb pt="3">
    <BreadcrumbItem>
      <BreadcrumbLink href="">Page 1</BreadcrumbLink>
    </BreadcrumbItem>
    {/* this creates the exact same HTML as for page 1 */}
    <BreadcrumbItem>
      <BreadcrumbLink href="">Page 2</BreadcrumbLink>
      <BreadcrumbSeparator />
    </BreadcrumbItem>
  </Breadcrumb>

  <Breadcrumb pt="3">
    <BreadcrumbItem>
      <BreadcrumbLink href="">Page 1</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink href="">Page 2</BreadcrumbLink>
    </BreadcrumbItem>
    {/* this works too, but creates an additional empty li HTML tag */}
    <BreadcrumbItem />
  </Breadcrumb>
</Box>

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>

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

colorScheme

Description

Color Schemes for Breadcrumb are not implemented in the default theme. You can extend the theme to implement them.

Type

string

listProps

Type

HTMLChakraProps<"ol">

separator

Description

The visual separator between each breadcrumb item

Type

string | React.ReactElement

Default

"/"

size

Description

Sizes for Breadcrumb are not implemented in the default theme. You can extend the theme to implement them.

Type

string

spacing

Description

The left and right margin applied to the separator

Type

SystemStyleObject["mx"]

Default

"0.5rem"

variant

Description

Variants for Breadcrumb are not implemented in the default theme. You can extend the theme to implement them.

Type

string

BreadcrumbItem Props

isCurrentPage

Type

boolean

isLastChild

Type

boolean

separator

Description

The visual separator between each breadcrumb item

Type

string | React.ReactElement

Default

"/"

spacing

Description

The left and right margin applied to the separator

Type

SystemStyleObject["mx"]

Default

"0.5rem"

BreadcrumbLink Props

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

isCurrentPage

Type

boolean

BreadcrumbSeparator Props

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