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

Bun UI

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.

Props

BreadcrumbList

Prop	Type	Default	Description
separator	`ReactNode`	-	Override the default separator icon.

BreadcrumbLink

Prop	Type	Default	Description
asChild	`boolean`	`false`	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	`boolean`	`false`	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.

Badge Button