{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"components-breadcrumbs-bordered-breadcrumb","type":"registry:block","title":"Bordered Breadcrumb","files":[{"path":"components/blocks/components/breadcrumbs/bordered-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 BorderedBreadcrumb() {\n  return (\n    <Breadcrumb className=\"p-6\">\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink\n            href=\"#\"\n            className=\"border-border hover:bg-muted rounded border px-3 py-1 transition-colors\"\n          >\n            Home\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <ChevronRight className=\"h-4 w-4\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink\n            href=\"#\"\n            className=\"border-border hover:bg-muted rounded border px-3 py-1 transition-colors\"\n          >\n            Products\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <ChevronRight className=\"h-4 w-4\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink\n            href=\"#\"\n            className=\"border-border hover:bg-muted rounded border px-3 py-1 transition-colors\"\n          >\n            Categories\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <ChevronRight className=\"h-4 w-4\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage className=\"border-primary bg-primary/10 rounded border px-3 py-1 font-medium\">\n            Electronics\n          </BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n","type":"registry:component","target":"components/blocks/components/breadcrumbs/bordered-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 sitting inside a thin outlined container. Frames the navigation path cleanly on a dashboard header or any content section toolbar.","dependencies":["lucide-react","radix-ui"]}