@chakra-ui/breadcrumb
TypeScript icon, indicating that this package has built-in type declarations

2.2.0 • Public • Published

@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>

Package Sidebar

Install

npm i @chakra-ui/breadcrumb

Weekly Downloads

434,910

Version

2.2.0

License

MIT

Unpacked Size

75.1 kB

Total Files

48

Last publish

Collaborators

  • segunadebayo
  • _codebender828