Breadcrumb

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

Source@chakra-ui/react

Import#

import { Breadcrumb } from '@chakra-ui/react'

Usage#

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

Changing the separator#

Render a custom children into the Breadcrumb.Separator component to change the separator. You can set to to a string like "-" or an icon.

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator>-</Breadcrumb.Separator>
    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>About</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator>-</Breadcrumb.Separator>
    <BreadcrumbItem>
      <Breadcrumb.CurrentLink>Contact</Breadcrumb.CurrentLink>
    </BreadcrumbItem>
  </Breadcrumb.List>
</Breadcrumb.Root>

Here's an example using an icon as a separator:

<Breadcrumb.Root>
  <Breadcrumb.List gap='8px'>
    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator>
      <FiArrowRight />
    </Breadcrumb.Separator>
    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>About</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator>
      <FiArrowRight />
    </Breadcrumb.Separator>
    <BreadcrumbItem>
      <Breadcrumb.CurrentLink href='#'>Contact</Breadcrumb.CurrentLink>
    </BreadcrumbItem>
  </Breadcrumb.List>
</Breadcrumb.Root>

Usage with Routing Library#

To use the Breadcrumb with a routing Library like Next.js Router or React Router, all you need to do is to pass the asChild prop to the Breadcrumb.Link component.

// import Link from "next/link"


<Breadcrumb>
  <Breadcrumb.Item>
    <Breadcrumb.Link asChild>
      <Link href='#'>Home</Link>
    </Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Link asChild>
      <Link href='#'>About</Link>
    </Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <BreadcrumbItem>
    <Breadcrumb.CurrentLink>Contact</Breadcrumb.CurrentLink>
  </BreadcrumbItem>
</Breadcrumb>

Accessibility#

  • The breadcrumb is rendered in a nav to denote that it is a navigation landmark, with a label of breadcrumb.
  • The current link has the aria-current=page and role=link
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel