{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"components-breadcrumbs-sticky-breadcrumb","type":"registry:block","title":"Sticky Breadcrumb","files":[{"path":"components/blocks/components/breadcrumbs/sticky-breadcrumb.tsx","content":"import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/components/ui/breadcrumb';\nimport { ChevronRight } from 'lucide-react';\n\nexport default function StickyBreadcrumb() {\n  return (\n    <div className=\"relative h-[300px] overflow-hidden rounded-md border\">\n      {/* This container simulates a scrollable area */}\n      <div className=\"h-full overflow-y-auto\">\n        {/* Sticky breadcrumb */}\n        <Breadcrumb className=\"bg-background/80 sticky top-0 z-10 border-b p-3 shadow-sm backdrop-blur-sm\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n              <ChevronRight className=\"h-4 w-4\" />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Products</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n              <ChevronRight className=\"h-4 w-4\" />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">\n                Categories\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n              <ChevronRight className=\"h-4 w-4\" />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n              <BreadcrumbPage className=\"font-medium\">\n                Electronics\n              </BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n\n        {/* Sample content to demonstrate scrolling */}\n        <div className=\"space-y-4 p-6\">\n          <h2 className=\"text-2xl font-bold\">Electronics</h2>\n          <p className=\"text-muted-foreground\">\n            Browse our selection of electronic products.\n          </p>\n          <div className=\"space-y-4\">\n            {Array.from({ length: 5 }).map((_, i) => (\n              <div key={i} className=\"rounded-md border p-4\">\n                <h3 className=\"font-medium\">Product Category {i + 1}</h3>\n                <p className=\"text-muted-foreground text-sm\">\n                  This is a sample product category description.\n                </p>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/components/breadcrumbs/sticky-breadcrumb.tsx"},{"path":"components/ui/breadcrumb.tsx","content":"import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <ChevronRightIcon />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <MoreHorizontalIcon\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n","type":"registry:ui","target":"components/ui/breadcrumb.tsx"}],"description":"A breadcrumb that pins to the top of the view as the page scrolls. Keeps the current location visible on long articles and deep settings pages.","dependencies":["lucide-react","radix-ui"]}