Breadcrumb

A collection of links for navigating websites. Breadcrumbs are typically placed at the top of a page and provide a trail back to the homepage or parent page.

Import

import { Breadcrumb } from "@aeonkit/react";

Usage

Default

The Breadcrumb component is used to wrap the Breadcrumb.Item components. The Breadcrumb.Item component is used to represent each item in the breadcrumb. The isCurrentPage prop is used to indicate the current page.

Preview

1. Home
2. About
3. Contact

Code

<Breadcrumb>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="/about">About</Breadcrumb.Item>
  <Breadcrumb.Item isCurrentPage>Contact</Breadcrumb.Item>
</Breadcrumb>

Custom Separator

The separator prop can be used to customize the separator between breadcrumb items.

Preview

1. Home
2. About
3. Contact

Code

<Breadcrumb separator={<LuMinus className="h-4 w-4" />}>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="/about">About</Breadcrumb.Item>
  <Breadcrumb.Item isCurrentPage>Contact</Breadcrumb.Item>
</Breadcrumb>

Custom Home Icon

Preview

2. About
3. Contact

Code

<Breadcrumb>
  <Breadcrumb.Item href="/">
    <LuHome className="h-4 w-4" />
  </Breadcrumb.Item>
  <Breadcrumb.Item href="/about">About</Breadcrumb.Item>
  <Breadcrumb.Item isCurrentPage>Contact</Breadcrumb.Item>
</Breadcrumb>

Props

Breadcrumb

separator?

ReactElement<IconType>

The separator between breadcrumb items.

API Interface: BreadcrumbProps

Breadcrumb.Item

href?

string

The URL to navigate to when the breadcrumb item is clicked.

isCurrentPage?

boolean

Indicates if the breadcrumb item is the current page.

API Interface: BreadcrumbItemProps