{
  "name": "Breadcrumb",
  "source": "src/components/Breadcrumb.tsx",
  "propsType": "BreadcrumbProps",
  "description": "Breadcrumb — where this page sits, and how to get back up.\n\nWHY AN ORDERED LIST INSIDE A NAMED LANDMARK\n\nThe trail is a sequence, and `ol` is what says so: a screen reader announces\n\"list, 4 items\" and the position within it, which is the entire content of a\nbreadcrumb. A row of `div`s with slashes conveys none of that, and the\nslashes themselves get read out as punctuation.\n\nThe separator here is drawn by CSS `::before` on each item after the first,\nso it is decoration that never enters the accessibility tree. Putting a \"/\"\nin the markup is the usual version of this component and the usual defect.\n\nTHE LAST CRUMB IS NOT A LINK\n\n`isCurrent` renders text with `aria-current=\"page\"`. A link to the page you\nare already on is a dead control: it announces as a link, invites a click,\nand does nothing. This is the most common breadcrumb bug and the reason the\nprop exists rather than being inferred from position — a trail whose last\ncrumb IS a link to somewhere else is legitimate, and inferring would break it.",
  "import": "import { Breadcrumb } from 'ionbase-ui';",
  "status": "stable",
  "summary": "Where this page sits in the hierarchy, and how to get back up. An ordered list inside a named landmark.",
  "useWhen": [
    "a page sits more than one level deep and the parent is not otherwise reachable",
    "a record view needs its collection one click away",
    "the hierarchy itself is information the user needs — which project, which environment"
  ],
  "useInstead": [
    {
      "when": "the destinations are siblings rather than ancestors",
      "use": "Tabs",
      "why": "a breadcrumb describes depth; tabs describe alternatives at the same depth"
    },
    {
      "when": "the trail is the primary navigation for the whole app",
      "use": "NavItem inside the app shell",
      "why": "a breadcrumb supplements navigation, it does not replace it — it appears after a user has already gone somewhere"
    }
  ],
  "slots": {
    "children": {
      "accepts": "BreadcrumbItem",
      "note": "ancestor first, current page last. Anything else and the trail reads backwards"
    }
  },
  "a11y": {
    "requires": [
      "`label` when a page has more than one nav landmark — it defaults to \"Breadcrumb\", which is what screen-reader users listen for"
    ],
    "notes": [
      "the separator is drawn by CSS ::before and never enters the accessibility tree; a \"/\" in the markup is announced as punctuation between every crumb",
      "the list is an `ol`, so the position and length are announced — which is the entire content of a breadcrumb"
    ]
  },
  "antiPatterns": [
    {
      "dont": "<div>Home / Projects / Invoice 12</div>",
      "do": "<Breadcrumb><BreadcrumbItem href=\"/\">Home</BreadcrumbItem>…</Breadcrumb>",
      "why": "a row of divs conveys neither sequence nor position, and the slashes are read aloud"
    },
    {
      "dont": "a full trail on a top-level page",
      "do": "omit it",
      "why": "a breadcrumb with one crumb is furniture — it takes vertical space to say 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": {
    "label": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "Names the landmark. A page with more than one `nav` needs them told apart,\nand \"Breadcrumb\" is what screen-reader users are listening for."
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "`BreadcrumbItem` elements, ancestor first."
    }
  },
  "propCounts": {
    "own": 2,
    "aria": 0,
    "dom": 277,
    "other": 0
  }
}