@chakra-ui/breadcrumb

What is @chakra-ui/breadcrumb?

@chakra-ui/breadcrumb is a component library for creating breadcrumb navigation in React applications. It provides a set of components that are easy to use and customize, allowing developers to create breadcrumb trails that enhance the navigation experience of their applications.

What are @chakra-ui/breadcrumb's main functionalities?

Basic Breadcrumb

This code sample demonstrates how to create a basic breadcrumb navigation with three items: Home, About, and Contact. The 'isCurrentPage' prop is used to indicate the current page.

```jsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/breadcrumb';

function BasicBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem>
        <BreadcrumbLink href="#">About</BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem isCurrentPage>
        <BreadcrumbLink href="#">Contact</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  );
}
```

Custom Separator

This code sample shows how to customize the separator between breadcrumb items using the 'separator' prop. In this example, a ChevronRightIcon is used as the separator.

```jsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/breadcrumb';
import { ChevronRightIcon } from '@chakra-ui/icons';

function CustomSeparatorBreadcrumb() {
  return (
    <Breadcrumb separator={<ChevronRightIcon color="gray.500" />}> 
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem>
        <BreadcrumbLink href="#">About</BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem isCurrentPage>
        <BreadcrumbLink href="#">Contact</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  );
}
```

Breadcrumb with Icons

This code sample demonstrates how to include icons in breadcrumb items. Icons are imported from '@chakra-ui/icons' and used within the BreadcrumbLink component.

```jsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/breadcrumb';
import { HomeIcon, InfoIcon, PhoneIcon } from '@chakra-ui/icons';

function BreadcrumbWithIcons() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">
          <HomeIcon /> Home
        </BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem>
        <BreadcrumbLink href="#">
          <InfoIcon /> About
        </BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem isCurrentPage>
        <BreadcrumbLink href="#">
          <PhoneIcon /> Contact
        </BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  );
}
```

Other packages similar to @chakra-ui/breadcrumb

react-breadcrumbs

react-breadcrumbs is a simple React component for creating breadcrumb navigation. It is less feature-rich compared to @chakra-ui/breadcrumb but provides a straightforward way to implement breadcrumbs in React applications.

react-router-breadcrumbs-hoc

react-router-breadcrumbs-hoc is a higher-order component for generating breadcrumbs based on React Router routes. It offers dynamic breadcrumb generation based on the application's routing configuration, which is different from the static approach used by @chakra-ui/breadcrumb.

react-breadcrumbs-dynamic

react-breadcrumbs-dynamic is a flexible and dynamic breadcrumb component for React. It allows for more complex breadcrumb structures and dynamic updates, making it suitable for applications with more advanced breadcrumb requirements compared to @chakra-ui/breadcrumb.

README

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