The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

v0.2.49Beta

Search

Breadcrumb

Source

A navigation component that helps users understand and navigate the hierarchy of a website.

Usage

Import the Breadcrumb component from @bun-ui/react and use it in your project:

import { Breadcrumb } from "@bun-ui/react"
<Breadcrumb>
  <BreadcrumbItem href="/">Home</Breadcrumb.Item>
  <BreadcrumbItem href="/docs">Docs</Breadcrumb.Item>
  <BreadcrumbItem>Current Page</Breadcrumb.Item>
</Breadcrumb>

Examples

Custom Separator

You can customize the separator between breadcrumb items using the separator prop.

Fully Customized Breadcrumb

Props

PropTypeDefaultDescription
separator
ReactNode-

Override the default separator icon.

PropTypeDefaultDescription
asChild
booleanfalse

Change the default rendered element for the one passed as a child, merging their props and behavior.

children
ReactNode-

The content of the link.

color
"primary" | "secondary" | "destructive" | "neutral""primary"

Color of the link.

currentLink
booleanfalse

if currentLink=true, this is rendered as a regular text

href
string-

The target link

underline
"none" | "always" | "hover""always"

When the link should have an underline.