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

    Install

    npm i @bianic-ui/breadcrumb

    DownloadsWeekly Downloads

    2

    Version

    0.1.0-alpha.2

    License

    MIT

    Unpacked Size

    77.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • ilmimris