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.
@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
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, obviously.
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "@chakra-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>