Breadcrumb

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

    SourceTheme Source@chakra-ui/breadcrumb

Import#

Chakra UI exports 4 breadcrumb-related components:

  • Breadcrumb: The parent container for breadcrumbs.
  • Breadcrumb.List: The container for individual items.
  • Breadcrumb.Item: Individual breadcrumb element containing a link and a divider.
  • Breadcrumb.Link: The breadcrumb link.
  • Breadcrumb.Separator: The visual separator between each breadcrumb.
import { Breadcrumb } from '@chakra-ui/react'

Usage#

Add isCurrentPage prop to the Breadcrumb.Item that matches the current path. When this prop is present, the Breadcrumb.Link renders a span with aria-current set to page instead of an anchor element.

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>Home</Breadcrumb.Link>
    </Breadcrumb.Item>


    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>Docs</Breadcrumb.Link>
    </Breadcrumb.Item>


    <Breadcrumb.Item isCurrentPage>
      <Breadcrumb.Link href='#'>Breadcrumb</Breadcrumb.Link>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

Separators#

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

<Breadcrumb.Root separator='-'>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>Home</Breadcrumb.Link>
    </Breadcrumb.Item>


    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>About</Breadcrumb.Link>
    </Breadcrumb.Item>


    <Breadcrumb.Item isCurrentPage>
      <Breadcrumb.Link href='#'>Contact</Breadcrumb.Link>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

Using an icon as the separator#

<Breadcrumb.Root
  spacing='8px'
  separator={<ChevronRightIcon color='gray.500' />}
>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>Home</Breadcrumb.Link>
    </Breadcrumb.Item>


    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>About</Breadcrumb.Link>
    </Breadcrumb.Item>


    <Breadcrumb.Item isCurrentPage>
      <Breadcrumb.Link href='#'>Contact</Breadcrumb.Link>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

Using a separator in last item#

If you want to have a Breadcrumb.Separator in the last item of the Breadcrumb.Root 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 Breadcrumb.Item. Feel free to also inspect the example below with the browsers dev tools.

<Box>
  <Breadcrumb.Root>
    <Breadcrumb.List>
      <Breadcrumb.Item>
        <Breadcrumb.Link href=''>Page 1</Breadcrumb.Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Breadcrumb.Link href=''>Page 2</Breadcrumb.Link>
      </Breadcrumb.Item>
      {/* this will generate a span in the ol HTML tag which causes the error: */}
      {/* <Breadcrumb.Separator /> */}
    </Breadcrumb.List>
  </Breadcrumb.Root>


  {/* preferred solution: */}
  <Breadcrumb.Root pt='3'>
    <Breadcrumb.List>
      <Breadcrumb.Item>
        <Breadcrumb.Link href=''>Page 1</Breadcrumb.Link>
      </Breadcrumb.Item>
      {/* this creates the exact same HTML as for page 1 */}
      <Breadcrumb.Item>
        <Breadcrumb.Link href=''>Page 2</Breadcrumb.Link>
        <Breadcrumb.Separator />
      </Breadcrumb.Item>
    </Breadcrumb.List>
  </Breadcrumb.Root>


  <Breadcrumb.Root pt='3'>
    <Breadcrumb.List>
      <Breadcrumb.Item>
        <Breadcrumb.Link href=''>Page 1</Breadcrumb.Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Breadcrumb.Link href=''>Page 2</Breadcrumb.Link>
      </Breadcrumb.Item>
      {/* this works too, but creates an additional empty li HTML tag */}
      <Breadcrumb.Item />
    </Breadcrumb.List>
  </Breadcrumb.Root>
</Box>

Composition#

Breadcrumb.Root 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.Root fontWeight='medium' fontSize='sm'>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>Home</Breadcrumb.Link>
    </Breadcrumb.Item>


    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>About</Breadcrumb.Link>
    </Breadcrumb.Item>


    <Breadcrumb.Item isCurrentPage>
      <Breadcrumb.Link href='#'>Current</Breadcrumb.Link>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

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 Breadcrumb.Link component.

It'll replace the rendered a tag with Reach's Link.

// import { Link } from "@reach/router"


<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link as={Link} to='#'>
        Home
      </Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Link as={Link} to='#'>
        About
      </Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item isCurrentPage>
      <Breadcrumb.Link>Contact</Breadcrumb.Link>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

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 Breadcrumb.Item with isCurrentPage prop adds the aria-current=page to the Breadcrumb.Link.
  • The separator has role set to presentation to denote that its for presentation purposes.
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel