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

1.3.2 • Public • Published

@hakuna-matata-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 @hakuna-matata-ui/breadcrumb

# or

npm i @hakuna-matata-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 "@hakuna-matata-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>

/@hakuna-matata-ui/breadcrumb/

    Package Sidebar

    Install

    npm i @hakuna-matata-ui/breadcrumb

    Weekly Downloads

    2

    Version

    1.3.2

    License

    MIT

    Unpacked Size

    31.5 kB

    Total Files

    13

    Last publish

    Collaborators

    • cryptocom