{
  "name": "Breadcrumb",
  "type": "component",
  "description": "A breadcrumb trail, composed from shadcn/ui Base UI parts: Breadcrumb (nav) > BreadcrumbList (ol) > BreadcrumbItem (li) > BreadcrumbLink | BreadcrumbPage, with BreadcrumbSeparator between items and BreadcrumbEllipsis for a collapsed middle. Separators are aria-hidden decoration; the ol carries the ordering.",
  "export": "@gtmi/strix-react/atoms/breadcrumb",
  "path": "@gtmi/strix-react/atoms/breadcrumb",
  "figma": {
    "file": "zT3vGm4QlFEI2Jp9nxyFKI",
    "fileName": "Demo components library",
    "nodes": [
      {
        "node": "22:5301",
        "name": ".breadcrumb",
        "section": "Atoms"
      }
    ]
  },
  "props": [
    {
      "name": "navLabel",
      "type": "string",
      "default": "\"breadcrumb\"",
      "description": "Accessible name for the nav landmark. A landmark with no name is indistinguishable from the page other navigations."
    }
  ],
  "parts": [
    {
      "name": "Breadcrumb",
      "description": "The nav landmark. Renders its children unchanged — it does not inspect or rewrite them."
    },
    {
      "name": "BreadcrumbList",
      "description": "The ol. Carries the hierarchy structurally."
    },
    {
      "name": "BreadcrumbItem",
      "description": "One li. Holds a BreadcrumbLink or a BreadcrumbPage."
    },
    {
      "name": "BreadcrumbLink",
      "description": "A navigable ancestor. Takes render={<Link href=\"/\" />} for a routing library, and inactive for an ancestor that is in the hierarchy but unreachable — announced via aria-disabled and out of the tab order."
    },
    {
      "name": "BreadcrumbPage",
      "description": "The current page. A span with aria-current=\"page\", never a link, and semibold so \"you are here\" is not conveyed by hue alone (WCAG 1.4.1)."
    },
    {
      "name": "BreadcrumbSeparator",
      "description": "Decoration between steps, aria-hidden and role=presentation. An li, because a non-li child of an ol is invalid. Pass children for a character instead of the 4px dot."
    },
    {
      "name": "BreadcrumbEllipsis",
      "description": "A collapsed middle: the glyph aria-hidden plus a visually hidden label. Compose it with Menu to make it interactive — see the Collapsed story."
    }
  ],
  "ai_tags": ["breadcrumb", "navigation", "trail", "overflow", "portal", "compound"],
  "since": "0.2.0",
  "tokens_used": [
    "--color-text-muted-figma",
    "--color-text-primary",
    "--color-text-disabled",
    "--color-border-control",
    "--color-border-focus",
    "--radius-xs",
    "--spacing-borders-sm",
    "--spacing-gap-100",
    "--spacing-touch-target",
    "--text-size-figma-12",
    "--leading-height-figma-12"
  ],
  "notes": "COMPOSED, NOT CONFIGURED, and this replaced an items-and-cloneElement design. The previous root read React.Children.toArray(children) and re-emitted every child with injected first/last/separator props documented as \"set by Breadcrumb. Not part of the public API\" — so a caller could not wrap a crumb, render one differently, or interleave a node of their own. The parts now follow shadcn/ui Base UI exactly.\n\nmaxVisibleItems WAS REMOVED, and the evidence matters: it collapsed the middle of a long trail into a portalled menu, and that behaviour came from maker-ds rather than the design authority. Figma .breadcrumb has no overflow behaviour at all — its Number axis is the same frame with later items switched off via visible:false (scripts/figma/bindings/breadcrumb.json). Automatic collapsing requires child inspection, so it cannot survive a composed API; a caller composes BreadcrumbEllipsis with Menu instead, which is what the Collapsed story shows and what shadcn documents. An earlier draft of the 0.2.0 spec claimed the collapse was Figma behaviour; reading the binding disproved it.\n\nSTYLED FROM THE FIGMA ATOM: a bare 12/18 trail with 4px round separators, no item padding, no rounded backgrounds and no accent inks. The 12/18 ramp is applied locally (--text-size-figma-12 / --leading-height-figma-12 at font-normal) because Typography cta-medium-xs is 12/16 at weight 500, and moving a shared role on one atom evidence is not warranted.\n\nTHE TWO DECLINED COLOUR DECISIONS ARE NOW FIGMA'S, because rule 3 voided the reasoning behind both. The trail is gray-400 #7e869c via --color-text-muted-figma, a role minted for it: no existing role carried the literal (the ramp straddles it at #a5b0c4 and #757d99) and seven atoms bind it for the same job. It had been declined for measuring 3.63:1 carried onto a WHITE page, where on Figma's own page it is 5.33:1 and passes AA. And the separator dot is color/brand/white, verified from the atom exported SVG rather than its variable table; calling it \"decoration outranking content\" at 19.37:1 described the drawing correctly but named a preference, not a conflict — no clause requires decoration to be dimmer than adjacent text, and the dot is aria-hidden.\n\nWHAT IS STILL NOT FIGMA'S is the current item, and it is a GAP rather than a conflict: the atom specifies no current item at all. Rule 2, so both cues are derived from Figma and denoted — the ink is color/brand/white, this same atom own separator colour, and the Semibold is .tab-item, where Figma marks the selected peer of a row exactly that way. Ink alone would convey position by hue (WCAG 1.4.1), which is why it takes both.\n\nPORTAL. Nothing here portals any more: the overflow menu is the caller composition, so Menu owns the theme stamp and the z-index token. The portal tests moved with it and assert the composed pattern, in order — the portalled node is not inside the rendering container first, queried by data-slot.\n\nTOUCH. breadcrumb-link is in TOUCH_EXEMPT_SLOTS under WCAG 2.5.5 Inline exception: the trail is inline navigation text, padding each crumb to 44px would make it a row of buttons, and the trail is not the only route to any of its destinations. The slot name is load-bearing for that exemption. An overflow trigger a caller composes is NOT inline text and takes the 44px floor via breadcrumbOverflowTriggerStyles.\n\nContrast assertions derive their inks from the component own cva output and are measured against --color-surface-base, since the Figma trail paints no surface at all."
}