{
  "name": "breadcrumb",
  "displayName": "Breadcrumb",
  "type": "native",
  "isCustomElement": false,
  "tag": null,
  "nativeTag": "nav",
  "selector": ".l-breadcrumb",
  "subItemOf": null,
  "summary": "A navigation trail showing the current page's position in the site hierarchy. Built on a native `<nav><ol>` per the WAI-ARIA APG pattern.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/breadcrumb",
    "js": null
  },
  "properties": [],
  "attributes": [
    {
      "name": "aria-label",
      "data": false,
      "values": [],
      "description": "Names the navigation landmark (use `\"Breadcrumb\"`)."
    },
    {
      "name": "aria-current",
      "data": false,
      "values": [],
      "description": "Set to `page` on the current crumb's `<a>`."
    },
    {
      "name": "data-unstyled-links",
      "data": true,
      "values": [],
      "description": "Opt out of Luxen's link theming (color, underline, hover) so you can apply your own link class. Layout, separators, scroll, and current-page behavior stay."
    }
  ],
  "events": [],
  "methods": [],
  "slots": [],
  "cssClasses": [
    {
      "name": ".l-breadcrumb",
      "description": "Breadcrumb navigation on a `<nav>` wrapping an `<ol>` of `<li><a>` crumbs."
    }
  ],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--gap",
      "default": "0.5rem",
      "description": "Space between crumbs and around the separator."
    },
    {
      "name": "--separator-color",
      "default": "var(--l-color-text-tertiary)",
      "description": "Separator glyph color."
    },
    {
      "name": "--separator",
      "default": "'/'",
      "description": "Divider glyph; any character (e.g. `'›'`) or a `url()` image."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "Basic",
      "language": "html",
      "code": "<nav class=\"l-breadcrumb\" aria-label=\"Breadcrumb\">\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/products\">Products</a></li>\n<li><a href=\"/products/bags\" aria-current=\"page\">Bags</a></li>\n</ol>\n</nav>"
    }
  ]
}