{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb-7",
  "type": "registry:component",
  "title": "Breadcrumb 7",
  "description": "Breadcrumb 7. Displays the hierarchical structure of a website or application.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "breadcrumb",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "components/watermelon/breadcrumb-7.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  ChevronRightIcon,\n  FolderIcon,\n  FolderOpenIcon,\n  HomeIcon,\n} from 'lucide-react';\n\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 RootSegment = {\n  label: string;\n  href: string;\n  icon: LucideIcon;\n};\n\nconst rootSegment: RootSegment = {\n  label: 'Home',\n  href: '#',\n  icon: HomeIcon,\n};\n\nconst currentLabel = 'Release Notes';\n\nconst menuOptions = ['Updates', 'Changelog', 'Archive'] as const;\n\nconst Breadcrumb7 = () => {\n  const [open, setOpen] = useState(false);\n  const RootIcon = rootSegment.icon;\n\n  return (\n    <Breadcrumb>\n      <BreadcrumbList className=\"gap-1.5 text-sm\">\n        <BreadcrumbItem>\n          <BreadcrumbLink\n            href={rootSegment.href}\n            className=\"hover:text-foreground flex items-center gap-1.5 rounded-sm px-1 py-0.5\"\n          >\n            <RootIcon className=\"text-muted-foreground size-3.5\" />\n            <span className=\"sr-only\">{rootSegment.label}</span>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator className=\"text-muted-foreground/60\">\n          <ChevronRightIcon className=\"size-3.5\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem className=\"flex items-center\">\n          <DropdownMenu open={open} onOpenChange={setOpen}>\n            <DropdownMenuTrigger className=\"text-muted-foreground hover:text-foreground inline-flex cursor-pointer items-center gap-1 rounded-sm px-1 py-0.5 outline-none\">\n              {open ? (\n                <FolderOpenIcon className=\"size-3.5\" />\n              ) : (\n                <FolderIcon className=\"size-3.5\" />\n              )}\n              <span className=\"sr-only\">\n                {open ? 'Open section menu' : 'Open section menu'}\n              </span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              {menuOptions.map((option) => (\n                <DropdownMenuItem key={option}>{option}</DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator className=\"text-muted-foreground/60\">\n          <ChevronRightIcon className=\"size-3.5\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage className=\"rounded-sm px-1 py-0.5 font-medium\">\n            {currentLabel}\n          </BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n};\n\nexport default Breadcrumb7;\n"
    }
  ]
}