{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb-6",
  "type": "registry:component",
  "title": "Breadcrumb 6",
  "description": "Breadcrumb 6. Displays the hierarchical structure of a website or application.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "breadcrumb",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "components/watermelon/breadcrumb-6.tsx",
      "type": "registry:component",
      "content": "import type { LucideIcon } from 'lucide-react';\nimport { ChevronDownIcon, ChevronRightIcon, HomeIcon } from 'lucide-react';\n\nimport { Badge } from '@/components/base-ui/badge';\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/components/base-ui/breadcrumb';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/components/base-ui/dropdown-menu';\n\ntype LinkSegment = {\n  label: string;\n  href: string;\n  icon?: LucideIcon;\n};\n\nconst rootSegment: LinkSegment = {\n  label: 'Home',\n  href: '#',\n  icon: HomeIcon,\n};\n\nconst sectionSegment: LinkSegment = {\n  label: 'Projects',\n  href: '#',\n};\n\nconst currentSegment = {\n  label: 'Design System',\n  options: ['Tokens', 'Components', 'Patterns'],\n} as const;\n\nconst Breadcrumb6 = () => {\n  const RootIcon = rootSegment.icon;\n\n  return (\n    <Breadcrumb>\n      <BreadcrumbList className=\"gap-1.5\">\n        <BreadcrumbItem>\n          <BreadcrumbLink href={rootSegment.href}>\n            <Badge\n              variant=\"outline\"\n              className=\"border-border/70 text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 px-2.5\"\n            >\n              {RootIcon ? <RootIcon className=\"size-3\" /> : null}\n              {rootSegment.label}\n            </Badge>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator className=\"text-muted-foreground/60\">\n          <ChevronRightIcon className=\"size-3.5\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink href={sectionSegment.href}>\n            <Badge\n              variant=\"outline\"\n              className=\"border-border/70 text-muted-foreground hover:text-foreground px-2.5\"\n            >\n              {sectionSegment.label}\n            </Badge>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator className=\"text-muted-foreground/60\">\n          <ChevronRightIcon className=\"size-3.5\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>\n            <DropdownMenu>\n              <DropdownMenuTrigger className=\"text-foreground inline-flex items-center gap-1 rounded-sm px-1 py-0.5 font-medium outline-none\">\n                {currentSegment.label}\n                <ChevronDownIcon className=\"text-muted-foreground size-3.5\" />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\">\n                {currentSegment.options.map((option) => (\n                  <DropdownMenuItem key={option}>{option}</DropdownMenuItem>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n};\n\nexport default Breadcrumb6;\n"
    }
  ]
}