{
  "name": "BreadcrumbItem",
  "source": "src/components/Breadcrumb.tsx",
  "propsType": "BreadcrumbItemProps",
  "import": "import { BreadcrumbItem } from 'ionbase-ui';",
  "status": "stable",
  "summary": "One crumb. A link to an ancestor, or the current page rendered as text.",
  "useWhen": [
    "inside a Breadcrumb, once per level"
  ],
  "useInstead": [
    {
      "when": "outside a breadcrumb trail",
      "use": "Link",
      "why": "the crumb's density, colour and truncation are tuned for a trail and look wrong on their own"
    }
  ],
  "slots": {
    "children": {
      "accepts": "text",
      "note": "the name of the level, not its path"
    }
  },
  "a11y": {
    "requires": [
      "`isCurrent` on the last crumb, which renders it as text with aria-current=\"page\" rather than as a link"
    ],
    "notes": [
      "isCurrent is a prop rather than inferred from position: a trail whose last crumb legitimately links elsewhere exists, and inferring would break it"
    ]
  },
  "antiPatterns": [
    {
      "dont": "<BreadcrumbItem href=\"/invoices/12\">Invoice 12</BreadcrumbItem> for the page you are on",
      "do": "<BreadcrumbItem isCurrent>Invoice 12</BreadcrumbItem>",
      "why": "a link to the current page is a dead control — it announces as a link, invites a click and does nothing"
    }
  ],
  "stylesheet": "src/styles/breadcrumb.css",
  "tokens": [
    "--border-focus",
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-medium",
    "--ion-duration-base",
    "--ion-ease-out",
    "--radius-xs",
    "--spacing-8",
    "--text-default",
    "--text-secondary",
    "--text-tertiary",
    "--type-body-sm",
    "--type-body-sm-line-height"
  ],
  "props": {
    "href": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "Omit on the current page — the last crumb is not a link."
    },
    "isCurrent": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "The page the user is on. Marked `aria-current=\"page\"` and rendered as text\nrather than a link."
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own"
    }
  },
  "propCounts": {
    "own": 3,
    "aria": 0,
    "dom": 277,
    "other": 0
  }
}