{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "type": "registry:ui",
  "title": "Breadcrumb",
  "description": "A native <nav> landmark wrapping an <ol> of links that shows the path to the current page; the current page is a plain <span aria-current=\"page\">, separators are aria-hidden. Zero JS. Ships in five flavours and follows the WAI-ARIA APG breadcrumb pattern.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/breadcrumb.tsx",
      "type": "registry:ui",
      "target": "components/ui/breadcrumb.tsx",
      "content": "/** @jsxImportSource hono/jsx */\nimport type { PropsWithChildren } from \"hono/jsx\"\nimport { cn, type ClassValue } from \"@/registry/lib/cn\"\n\n// Breadcrumb — shadcn-htmx, htmx v4 + Tailwind v4.\n//\n// shadcn source of truth (React/Radix anatomy we mirror):\n//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/breadcrumb.tsx\n//   repos/shadcn-ui/apps/v4/content/docs/components/radix/breadcrumb.mdx\n//\n// APG pattern (the accessibility contract):\n//   repos/aria-practices/content/patterns/breadcrumb/breadcrumb-pattern.html\n// The APG says: keyboard interaction is \"Not applicable\" — a breadcrumb is\n// just a list of links, so there is ZERO JS here. The ARIA contract is:\n//   1. The trail lives inside a navigation landmark.            (<nav>)\n//   2. The landmark is labelled via aria-label / aria-labelledby.\n//   3. The link to the current page carries aria-current=\"page\".\n//      \"If the element representing the current page is not a link,\n//       aria-current is optional.\"\n//\n// HOW WE DIFFER FROM RADIX shadcn:\n//   - Radix renders BreadcrumbPage as <span role=\"link\" aria-disabled=\"true\"\n//     aria-current=\"page\">. That role=\"link\" is an emulation that makes AT\n//     announce a non-interactive element as a link — exactly the kind of\n//     platform-faking AGENTS.md forbids. We drop role/aria-disabled and ship\n//     a plain <span aria-current=\"page\">: a real non-link element, which the\n//     APG explicitly endorses (\"If … not a link, aria-current is optional\").\n//     We keep aria-current because it still conveys \"this is the current page\"\n//     and is harmless on a span:\n//       repos/mdn/files/en-us/web/accessibility/aria/reference/attributes/aria-current/\n//   - Radix BreadcrumbSeparator/Ellipsis use role=\"presentation\"; we use plain\n//     aria-hidden=\"true\" which already removes the node from the a11y tree\n//     (MDN aria-hidden) — no extra role needed for a decorative <li>/<span>.\n//   - We render BreadcrumbList as <ol> (ordered: hierarchy has a direction),\n//     matching the APG description \"list of links … in hierarchical order\".\n//       repos/mdn/files/en-us/web/html/reference/elements/ol/\n\n// Root navigation landmark. data-slot=\"breadcrumb\".\ntype BreadcrumbProps = PropsWithChildren<{\n  // Accessible name for the navigation landmark.\n  ariaLabel?: string\n  // Id of a visible heading that labels the landmark. When set, that heading\n  // is the name source and the defaulted aria-label is NOT emitted, so the\n  // <nav> never carries two competing names. APG: the landmark \"is labelled\n  // via aria-label or aria-labelledby\" — both are first-class options.\n  //   repos/aria-practices/content/patterns/breadcrumb/breadcrumb-pattern.html\n  ariaLabelledby?: string\n  class?: ClassValue\n  [key: `hx-${string}`]: any\n  [key: `data-${string}`]: any\n  [key: `aria-${string}`]: any\n}>\nexport function Breadcrumb(props: BreadcrumbProps) {\n  const { ariaLabel = \"Breadcrumb\", ariaLabelledby, class: className, children, ...rest } = props\n  return (\n    <nav\n      data-slot=\"breadcrumb\"\n      aria-label={ariaLabelledby ? undefined : ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      class={cn(className)}\n      {...rest}\n    >\n      {children}\n    </nav>\n  )\n}\n\n// Ordered list of trail items.\ntype BreadcrumbListProps = PropsWithChildren<{\n  class?: ClassValue\n  [key: `data-${string}`]: any\n}>\nexport function BreadcrumbList(props: BreadcrumbListProps) {\n  const { class: className, children, ...rest } = props\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      class={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      {...rest}\n    >\n      {children}\n    </ol>\n  )\n}\n\n// A single trail item (link, page, or ellipsis goes inside).\ntype BreadcrumbItemProps = PropsWithChildren<{\n  class?: ClassValue\n  [key: `data-${string}`]: any\n}>\nexport function BreadcrumbItem(props: BreadcrumbItemProps) {\n  const { class: className, children, ...rest } = props\n  return (\n    <li data-slot=\"breadcrumb-item\" class={cn(\"inline-flex items-center gap-1.5\", className)} {...rest}>\n      {children}\n    </li>\n  )\n}\n\n// A real <a> to a parent page. htmx attrs ride along for partial nav.\ntype BreadcrumbLinkProps = PropsWithChildren<{\n  href?: string\n  class?: ClassValue\n  [key: `hx-${string}`]: any\n  [key: `data-${string}`]: any\n  [key: `aria-${string}`]: any\n}>\nexport function BreadcrumbLink(props: BreadcrumbLinkProps) {\n  const { href, class: className, children, ...rest } = props\n  return (\n    <a\n      href={href}\n      data-slot=\"breadcrumb-link\"\n      class={cn(\n        \"transition-colors hover:text-foreground\",\n        \"focus-visible:rounded-sm focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none\",\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </a>\n  )\n}\n\n// The current page. Plain <span aria-current=\"page\"> — NOT a link.\ntype BreadcrumbPageProps = PropsWithChildren<{\n  class?: ClassValue\n  [key: `data-${string}`]: any\n}>\nexport function BreadcrumbPage(props: BreadcrumbPageProps) {\n  const { class: className, children, ...rest } = props\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      aria-current=\"page\"\n      class={cn(\"font-normal text-foreground\", className)}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\n// Decorative separator between items. aria-hidden so AT skips the glyph.\n// data-* passes through (a global attribute valid on every element) so callers\n// can attach CSS/JS hooks, matching the other subcomponents.\n//   repos/mdn/files/en-us/web/html/reference/global_attributes/index.md\ntype BreadcrumbSeparatorProps = PropsWithChildren<{\n  class?: ClassValue\n  [key: `data-${string}`]: any\n}>\nexport function BreadcrumbSeparator(props: BreadcrumbSeparatorProps) {\n  const { class: className, children, ...rest } = props\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      aria-hidden=\"true\"\n      class={cn(\"[&>svg]:size-3.5\", className)}\n      {...rest}\n    >\n      {children ?? (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"9 18 15 12 9 6\" />\n        </svg>\n      )}\n    </li>\n  )\n}\n\n// Collapsed-range indicator. aria-hidden glyph + sr-only \"More\" text so AT\n// users still hear that items were omitted. data-* passes through (a global\n// attribute valid on every element), matching the other subcomponents.\n//   repos/mdn/files/en-us/web/html/reference/global_attributes/index.md\ntype BreadcrumbEllipsisProps = {\n  class?: ClassValue\n  [key: `data-${string}`]: any\n}\nexport function BreadcrumbEllipsis(props: BreadcrumbEllipsisProps) {\n  const { class: className, ...rest } = props\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      aria-hidden=\"true\"\n      class={cn(\"flex size-9 items-center justify-center\", className)}\n      {...rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n        aria-hidden=\"true\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"1\" />\n        <circle cx=\"19\" cy=\"12\" r=\"1\" />\n        <circle cx=\"5\" cy=\"12\" r=\"1\" />\n      </svg>\n      <span class=\"sr-only\">More</span>\n    </span>\n  )\n}\n"
    },
    {
      "path": "registry/jinja2/breadcrumb.html",
      "type": "registry:file",
      "target": "templates/components/breadcrumb.html",
      "content": "{# Breadcrumb macros — shadcn-htmx, htmx v4 + Tailwind v4.\n   Mirrors registry/ui/breadcrumb.tsx EXACTLY (same elements, ARIA,\n   data-slot, classes). Zero JS — a breadcrumb is just a list of links.\n\n   APG: repos/aria-practices/content/patterns/breadcrumb/breadcrumb-pattern.html\n   The current page is a plain <span aria-current=\"page\">, not a link.\n\n   Usage:\n     {% from \"components/breadcrumb.html\" import breadcrumb_open, breadcrumb_close,\n        breadcrumb_list_open, breadcrumb_list_close, breadcrumb_item,\n        breadcrumb_link, breadcrumb_page, breadcrumb_separator, breadcrumb_ellipsis %}\n\n     {{ breadcrumb_open(aria_label=\"Breadcrumb\") }}{{ breadcrumb_list_open() }}\n       {{ breadcrumb_item(breadcrumb_link(\"Home\", href=\"/\")) }}\n       {{ breadcrumb_separator() }}\n       {{ breadcrumb_item(breadcrumb_link(\"Components\", href=\"/components\")) }}\n       {{ breadcrumb_separator() }}\n       {{ breadcrumb_item(breadcrumb_page(\"Breadcrumb\")) }}\n     {{ breadcrumb_list_close() }}{{ breadcrumb_close() }} #}\n\n{# Pass aria_labelledby to point the <nav> at a visible heading id; when set,\n   the defaulted aria-label is NOT emitted so the landmark never carries two\n   competing names. APG: the landmark \"is labelled via aria-label or\n   aria-labelledby\". repos/aria-practices/content/patterns/breadcrumb/breadcrumb-pattern.html #}\n{% macro breadcrumb_open(aria_label=\"Breadcrumb\", aria_labelledby=none, extra_class=\"\", **attrs) %}\n<nav data-slot=\"breadcrumb\"\n     {%- if aria_labelledby %} aria-labelledby=\"{{ aria_labelledby }}\"{% else %} aria-label=\"{{ aria_label }}\"{% endif %} class=\"{{ extra_class }}\"\n     {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}=\"{{ v }}\"{% endfor -%}>\n{% endmacro %}\n\n{% macro breadcrumb_close() %}\n</nav>\n{% endmacro %}\n\n{% macro breadcrumb_list_open() %}\n<ol data-slot=\"breadcrumb-list\" class=\"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5\">\n{% endmacro %}\n\n{% macro breadcrumb_list_close() %}\n</ol>\n{% endmacro %}\n\n{% macro breadcrumb_item(body, **attrs) %}\n<li data-slot=\"breadcrumb-item\" class=\"inline-flex items-center gap-1.5\"\n    {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}=\"{{ v }}\"{% endfor -%}>{{ body|safe }}</li>\n{% endmacro %}\n\n{% macro breadcrumb_link(label, href=none, **attrs) %}\n<a {% if href %}href=\"{{ href }}\"{% endif %} data-slot=\"breadcrumb-link\"\n   class=\"transition-colors hover:text-foreground focus-visible:rounded-sm focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none\"\n   {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}=\"{{ v }}\"{% endfor -%}>{{ label|safe }}</a>\n{% endmacro %}\n\n{% macro breadcrumb_page(label) %}\n<span data-slot=\"breadcrumb-page\" aria-current=\"page\" class=\"font-normal text-foreground\">{{ label|safe }}</span>\n{% endmacro %}\n\n{# **attrs forwards data-* (a global attribute valid on every element) so\n   callers can attach CSS/JS hooks, matching the other subcomponents.\n   repos/mdn/files/en-us/web/html/reference/global_attributes/index.md #}\n{% macro breadcrumb_separator(body=none, **attrs) %}\n<li data-slot=\"breadcrumb-separator\" aria-hidden=\"true\" class=\"[&>svg]:size-3.5\"\n    {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}=\"{{ v }}\"{% endfor -%}>{% if body %}{{ body|safe }}{% else %}<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 18 15 12 9 6\" /></svg>{% endif %}</li>\n{% endmacro %}\n\n{% macro breadcrumb_ellipsis(**attrs) %}\n<span data-slot=\"breadcrumb-ellipsis\" aria-hidden=\"true\" class=\"flex size-9 items-center justify-center\"\n      {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}=\"{{ v }}\"{% endfor -%}><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"1\" /><circle cx=\"19\" cy=\"12\" r=\"1\" /><circle cx=\"5\" cy=\"12\" r=\"1\" /></svg><span class=\"sr-only\">More</span></span>\n{% endmacro %}\n"
    },
    {
      "path": "registry/go-templates/breadcrumb.tmpl",
      "type": "registry:file",
      "target": "components/breadcrumb.tmpl",
      "content": "{{/* Breadcrumb templates — shadcn-htmx, htmx v4 + Tailwind v4.\n     Mirrors registry/ui/breadcrumb.tsx EXACTLY (elements, ARIA, data-slot,\n     classes). Zero JS — a breadcrumb is just a list of links.\n\n     APG: repos/aria-practices/content/patterns/breadcrumb/breadcrumb-pattern.html\n     Current page is a plain <span aria-current=\"page\">, not a link.\n\n     Usage:\n       {{template \"breadcrumb\" (dict \"AriaLabel\" \"Breadcrumb\" \"Body\" (htmlSafe `\n         {{template \"breadcrumb_list\" (dict \"Body\" (htmlSafe `\n           {{template \"breadcrumb_item\" (dict \"Body\" (htmlSafe (printf \"%s\" (call ... ))))}}\n         `))}}\n       `))}}\n*/}}\n\n{{/* Pass AriaLabelledby to point the <nav> at a visible heading id; when set,\n     the defaulted aria-label is NOT emitted so the landmark never carries two\n     competing names. APG: the landmark \"is labelled via aria-label or\n     aria-labelledby\".\n     repos/aria-practices/content/patterns/breadcrumb/breadcrumb-pattern.html */}}\n{{define \"breadcrumb\"}}\n<nav data-slot=\"breadcrumb\"{{if .AriaLabelledby}} aria-labelledby=\"{{.AriaLabelledby}}\"{{else}} aria-label=\"{{or .AriaLabel \"Breadcrumb\"}}\"{{end}} class=\"{{.Class}}\">{{.Body}}</nav>\n{{end}}\n\n{{define \"breadcrumb_list\"}}\n<ol data-slot=\"breadcrumb-list\" class=\"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5\">{{.Body}}</ol>\n{{end}}\n\n{{define \"breadcrumb_item\"}}\n<li data-slot=\"breadcrumb-item\" class=\"inline-flex items-center gap-1.5\">{{.Body}}</li>\n{{end}}\n\n{{define \"breadcrumb_link\"}}\n<a {{if .Href}}href=\"{{.Href}}\" {{end}}data-slot=\"breadcrumb-link\" class=\"transition-colors hover:text-foreground focus-visible:rounded-sm focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none\">{{.Label}}</a>\n{{end}}\n\n{{define \"breadcrumb_page\"}}\n<span data-slot=\"breadcrumb-page\" aria-current=\"page\" class=\"font-normal text-foreground\">{{.Label}}</span>\n{{end}}\n\n{{/* .Attrs forwards data-* (a global attribute valid on every element) so\n     callers can attach CSS/JS hooks, matching the other subcomponents. Pass an\n     htmlSafe-wrapped attribute string (e.g. ` data-variant=\"slash\"`).\n     repos/mdn/files/en-us/web/html/reference/global_attributes/index.md */}}\n{{define \"breadcrumb_separator\"}}\n<li data-slot=\"breadcrumb-separator\" aria-hidden=\"true\" class=\"[&>svg]:size-3.5\"{{with .Attrs}}{{.}}{{end}}>{{if .Body}}{{.Body}}{{else}}<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 18 15 12 9 6\" /></svg>{{end}}</li>\n{{end}}\n\n{{define \"breadcrumb_ellipsis\"}}\n<span data-slot=\"breadcrumb-ellipsis\" aria-hidden=\"true\" class=\"flex size-9 items-center justify-center\"{{with .Attrs}}{{.}}{{end}}><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"1\" /><circle cx=\"19\" cy=\"12\" r=\"1\" /><circle cx=\"5\" cy=\"12\" r=\"1\" /></svg><span class=\"sr-only\">More</span></span>\n{{end}}\n"
    },
    {
      "path": "registry/phoenix/breadcrumb.ex",
      "type": "registry:file",
      "target": "lib/my_app_web/components/breadcrumb.ex",
      "content": "defmodule ShadcnHtmx.Components.Breadcrumb do\n  @moduledoc \"\"\"\n  Breadcrumb — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.\n\n  A `<nav>` landmark with `aria-label` wrapping an ordered list of links.\n  Zero JS — a breadcrumb is just a list of links (the WAI-ARIA APG lists\n  keyboard interaction as \"Not applicable\"). The current page is a plain\n  `<span aria-current=\"page\">`, not a link. Separators / ellipsis are\n  `aria-hidden`.\n\n  Mirrors registry/ui/breadcrumb.tsx EXACTLY (elements, ARIA, data-slot,\n  classes). APG pattern:\n  repos/aria-practices/content/patterns/breadcrumb/breadcrumb-pattern.html\n\n  ## Examples\n\n      <.breadcrumb aria-label=\"Breadcrumb\">\n        <.breadcrumb_list>\n          <.breadcrumb_item>\n            <.breadcrumb_link href={~p\"/\"}>Home</.breadcrumb_link>\n          </.breadcrumb_item>\n          <.breadcrumb_separator />\n          <.breadcrumb_item>\n            <.breadcrumb_link href={~p\"/components\"}>Components</.breadcrumb_link>\n          </.breadcrumb_item>\n          <.breadcrumb_separator />\n          <.breadcrumb_item>\n            <.breadcrumb_page>Breadcrumb</.breadcrumb_page>\n          </.breadcrumb_item>\n        </.breadcrumb_list>\n      </.breadcrumb>\n  \"\"\"\n\n  use Phoenix.Component\n\n  attr :\"aria-label\", :string, default: \"Breadcrumb\"\n  # Id of a visible heading that labels the landmark. When set, that heading is\n  # the name source and the defaulted aria-label is NOT emitted, so the <nav>\n  # never carries two competing names. APG: the landmark \"is labelled via\n  # aria-label or aria-labelledby\".\n  # repos/aria-practices/content/patterns/breadcrumb/breadcrumb-pattern.html\n  attr :\"aria-labelledby\", :string, default: nil\n  attr :class, :string, default: nil\n  attr :rest, :global\n  slot :inner_block, required: true\n\n  def breadcrumb(assigns) do\n    ~H\"\"\"\n    <nav\n      data-slot=\"breadcrumb\"\n      aria-label={if assigns[:\"aria-labelledby\"], do: nil, else: assigns[:\"aria-label\"]}\n      aria-labelledby={assigns[:\"aria-labelledby\"]}\n      class={[@class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </nav>\n    \"\"\"\n  end\n\n  attr :class, :string, default: nil\n  attr :rest, :global\n  slot :inner_block, required: true\n\n  def breadcrumb_list(assigns) do\n    ~H\"\"\"\n    <ol\n      data-slot=\"breadcrumb-list\"\n      class={[\n        \"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5\",\n        @class\n      ]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </ol>\n    \"\"\"\n  end\n\n  attr :class, :string, default: nil\n  attr :rest, :global\n  slot :inner_block, required: true\n\n  def breadcrumb_item(assigns) do\n    ~H\"\"\"\n    <li data-slot=\"breadcrumb-item\" class={[\"inline-flex items-center gap-1.5\", @class]} {@rest}>\n      {render_slot(@inner_block)}\n    </li>\n    \"\"\"\n  end\n\n  attr :href, :string, default: nil\n  attr :class, :string, default: nil\n  attr :rest, :global\n  slot :inner_block, required: true\n\n  def breadcrumb_link(assigns) do\n    ~H\"\"\"\n    <a\n      href={@href}\n      data-slot=\"breadcrumb-link\"\n      class={[\n        \"transition-colors hover:text-foreground\",\n        \"focus-visible:rounded-sm focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none\",\n        @class\n      ]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </a>\n    \"\"\"\n  end\n\n  attr :class, :string, default: nil\n  slot :inner_block, required: true\n\n  def breadcrumb_page(assigns) do\n    ~H\"\"\"\n    <span data-slot=\"breadcrumb-page\" aria-current=\"page\" class={[\"font-normal text-foreground\", @class]}>\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\n\n  attr :class, :string, default: nil\n  # :rest forwards data-* (a global attribute valid on every element) so callers\n  # can attach CSS/JS hooks, matching the other subcomponents.\n  # repos/mdn/files/en-us/web/html/reference/global_attributes/index.md\n  attr :rest, :global\n  slot :inner_block\n\n  def breadcrumb_separator(assigns) do\n    ~H\"\"\"\n    <li data-slot=\"breadcrumb-separator\" aria-hidden=\"true\" class={[\"[&>svg]:size-3.5\", @class]} {@rest}>\n      <%= if @inner_block != [] do %>\n        {render_slot(@inner_block)}\n      <% else %>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"9 18 15 12 9 6\" />\n        </svg>\n      <% end %>\n    </li>\n    \"\"\"\n  end\n\n  attr :class, :string, default: nil\n  # :rest forwards data-* (a global attribute valid on every element) so callers\n  # can attach CSS/JS hooks, matching the other subcomponents.\n  # repos/mdn/files/en-us/web/html/reference/global_attributes/index.md\n  attr :rest, :global\n\n  def breadcrumb_ellipsis(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      aria-hidden=\"true\"\n      class={[\"flex size-9 items-center justify-center\", @class]}\n      {@rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n        aria-hidden=\"true\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"1\" />\n        <circle cx=\"19\" cy=\"12\" r=\"1\" />\n        <circle cx=\"5\" cy=\"12\" r=\"1\" />\n      </svg>\n      <span class=\"sr-only\">More</span>\n    </span>\n    \"\"\"\n  end\nend\n"
    },
    {
      "path": "registry/html/breadcrumb.html",
      "type": "registry:file",
      "target": "snippets/breadcrumb.html",
      "content": "<!--\n  shadcn-htmx — raw HTML breadcrumb snippet.\n  A <nav> landmark with aria-label wrapping an <ol> of links. The current\n  page is a plain <span aria-current=\"page\"> (not a link). Separators are\n  decorative <li aria-hidden=\"true\">. Zero JS — relies only on theme tokens\n  in styles.css.\n\n  Labelling: the landmark is named via aria-label OR aria-labelledby — both\n  are first-class per the APG. To point the <nav> at an existing visible\n  heading instead, drop aria-label and use aria-labelledby=\"heading-id\" (do\n  not set both, or the <nav> carries two competing names).\n\n  Separators / ellipsis are decorative and accept any global attribute\n  (e.g. a data-* hook for CSS/JS) directly on the <li>/<span>.\n\n  APG: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/\n-->\n\n<nav data-slot=\"breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol data-slot=\"breadcrumb-list\"\n      class=\"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5\">\n    <li data-slot=\"breadcrumb-item\" class=\"inline-flex items-center gap-1.5\">\n      <a href=\"/\" data-slot=\"breadcrumb-link\"\n         class=\"transition-colors hover:text-foreground focus-visible:rounded-sm focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none\">Home</a>\n    </li>\n    <li data-slot=\"breadcrumb-separator\" aria-hidden=\"true\" class=\"[&>svg]:size-3.5\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 18 15 12 9 6\" /></svg>\n    </li>\n    <li data-slot=\"breadcrumb-item\" class=\"inline-flex items-center gap-1.5\">\n      <a href=\"/components\" data-slot=\"breadcrumb-link\"\n         class=\"transition-colors hover:text-foreground focus-visible:rounded-sm focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none\">Components</a>\n    </li>\n    <li data-slot=\"breadcrumb-separator\" aria-hidden=\"true\" class=\"[&>svg]:size-3.5\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 18 15 12 9 6\" /></svg>\n    </li>\n    <li data-slot=\"breadcrumb-item\" class=\"inline-flex items-center gap-1.5\">\n      <span data-slot=\"breadcrumb-page\" aria-current=\"page\" class=\"font-normal text-foreground\">Breadcrumb</span>\n    </li>\n  </ol>\n</nav>\n"
    }
  ]
}