{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "type": "registry:ui",
  "title": "Breadcrumb",
  "description": "Hierarchical navigation trail showing the user's location, with truncation and custom separators.",
  "dependencies": [
    "@radix-ui/react-slot",
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/breadcrumb.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Breadcrumb primitive — navigation trail showing the current page hierarchy.\n * Pure Tailwind component with Radix UI Slot for flexible link rendering.\n * Part of the Saasflare base component layer.\n * @module packages/ui/components/ui/breadcrumb\n * @layer core\n *\n * @component\n * @example\n * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage } from '@saasflare/ui';\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem>\n *     <BreadcrumbItem><BreadcrumbPage>Current</BreadcrumbPage></BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n */\nimport * as React from \"react\"\nimport { CaretRightIcon, DotsThreeIcon } from \"@saasflare/ui\"\nimport * as Slot from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/**\n * Props for {@link Breadcrumb}. Extends the native `<nav>` props with the\n * Saasflare axes (`surface`, `radius`, `animated`, `iconWeight`) inherited from\n * {@link SaasflareComponentProps}. Breadcrumb is a text-navigation subset, so the\n * axes are emitted on the root for consistency rather than driving a surface.\n */\ninterface BreadcrumbProps extends Omit<React.ComponentProps<\"nav\">, keyof SaasflareComponentProps>, SaasflareComponentProps {}\n\n/**\n * Breadcrumb navigation root — labelled `<nav>` wrapping the trail. Resolves the\n * Saasflare axes and emits `data-surface`/`data-radius`/`data-animated`.\n */\nfunction Breadcrumb({ surface, radius, animated, iconWeight, ...props }: BreadcrumbProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <nav\n      {...props}\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n    />\n  )\n}\n\n/** Ordered list (`<ol>`) holding the breadcrumb items and separators. */\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 break-words text-muted-foreground sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Single breadcrumb entry (`<li>`) — wraps a {@link BreadcrumbLink} or {@link BreadcrumbPage}. */\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\n/**\n * Interactive breadcrumb link (`<a>`). Pass `asChild` to render through a custom\n * element (e.g. a framework `<Link>`) via Radix Slot while keeping the styling.\n *\n * @param asChild - When `true`, merges props onto the single child element instead\n *   of rendering an `<a>`.\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\n/** Current-page node (`<span>`) — the non-interactive, `aria-current=\"page\"` trail end. */\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\n/**\n * Visual divider (`<li>`) between items. Defaults to a Phosphor caret that adopts\n * the provider's `iconWeight`; override via `children` for a custom glyph.\n */\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  const sf = useSaasflareProps()\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 ?? <CaretRightIcon weight={sf.iconWeight} />}\n    </li>\n  )\n}\n\n/** Collapsed-trail indicator (`<span>`) — a Phosphor ellipsis glyph plus screen-reader \"More\". */\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  const sf = useSaasflareProps()\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <DotsThreeIcon weight={sf.iconWeight} className=\"size-4\" />\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  type BreadcrumbProps,\n}\n",
      "target": "components/ui/breadcrumb.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/breadcrumb.json"
  }
}