Installation
Usage
import BreadcrumbBoxed from "@/components/ruixen/breadcrumb-boxed";
const items = [
{ label: "Home", href: "/" },
{ label: "Components", href: "/components" },
{ label: "Breadcrumb" },
];
export default function MyBreadcrumb() {
return <BreadcrumbBoxed items={items} variant="filled" rounded="full" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbBoxedItem[] | - | Array of breadcrumb items |
variant | "default" | "filled" | "outline" | "ghost" | "default" | Container style variant |
showHomeIcon | boolean | true | Show home icon on first item |
rounded | "sm" | "md" | "lg" | "full" | "lg" | Border radius style |
className | string | - | Additional CSS classes |
BreadcrumbBoxedItem
| Property | Type | Description |
|---|---|---|
label | string | Display text for the item |
href | string | Optional link URL |
Variants
| Variant | Description |
|---|---|
default | Border with background and shadow |
filled | Muted background fill |
outline | Border only, no background |
ghost | Subtle muted background |