The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A navigation component that helps users understand and navigate the hierarchy of a website.
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>
You can customize the separator between breadcrumb items using the separator
prop.
Prop | Type | Default | Description |
---|---|---|---|
separator | ReactNode | - | Override the default separator icon. |
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 |
href | string | - | The target link |
underline | "none" | "always" | "hover" | "always" | When the link should have an underline. |