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

0.1.0-alpha.2 • Public • Published

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

# or

npm i @bianic-ui/breadcrumb

Import components

Bianic 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 "@bianic-ui/core"

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

Weekly Downloads

0

Version

0.1.0-alpha.2

License

MIT

Unpacked Size

77.8 kB

Total Files

14

Last publish

Collaborators

  • ilmimris