Breadcrumb Dropdown

Installation

Usage

import BreadcrumbDropdown from "@/components/ruixen/breadcrumb-dropdown";
 
const items = [
  { label: "Home", href: "/" },
  { label: "Products", href: "/products" },
  { label: "Electronics", href: "/products/electronics" },
  { label: "Computers", href: "/products/electronics/computers" },
  { label: "Laptops", href: "/products/electronics/computers/laptops" },
  { label: "Gaming Laptops" },
];
 
export default function MyBreadcrumb() {
  return <BreadcrumbDropdown items={items} maxVisible={3} />;
}

Props

Prop	Type	Default	Description
`items`	`BreadcrumbDropdownItem[]`	-	Array of breadcrumb items
`maxVisible`	`number`	`3`	Max items before collapsing
`dropdownIcon`	`"dots" \| "folder"`	`"dots"`	Icon for the dropdown trigger
`className`	`string`	-	Additional CSS classes

BreadcrumbDropdownItem

Property	Type	Description
`label`	`string`	Display text for the item
`href`	`string`	Optional link URL