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

    2.0.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>

    Install

    npm i @chakra-ui/breadcrumb

    DownloadsWeekly Downloads

    296,049

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    26.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • timkolberger
    • segunadebayo
    • _codebender828