Package Exports

@chakra-ui/breadcrumb
@chakra-ui/breadcrumb/dist/index.cjs.js
@chakra-ui/breadcrumb/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@chakra-ui/breadcrumb) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@chakra-ui/breadcrumb

Breadcrumbs help users visualize their current location in relation to the rest of the website or application by showing the hierarchy of pages.

Installation

yarn add @chakra-ui/breadcrumb

# or

npm i @chakra-ui/breadcrumb

Import components

Chakra UI exports 3 breadcrumb related components:

Breadcrumb: The parent container for breadcrumbs.
BreadcrumbItem: Individual breadcrumb element containing a link and a divider.
BreadcrumbLink: The breadcrumb link.

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } 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>Help</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Separators

Change the separator used in the breadcrumb by passing a string, like - or any react element (e.g. 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>