{
  "name": "ds-breadcrumb",
  "description": "Breadcrumb navigation component. Displays the current page location within the site hierarchy.",
  "docUrl": "https://design.soracom.io/design-system/elements/breadcrumb/",
  "category": "elements",
  "htmlElements": [
    "nav",
    "ul",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "layout": [
      "--sticky",
      "--sticky-0",
      "--sticky-20",
      "--sticky-40",
      "--sticky-60",
      "--sticky-80",
      "--sticky-100",
      "--sticky-120",
      "--sticky-140",
      "--sticky-160",
      "--sticky-180",
      "--sticky-200"
    ]
  },
  "structure": {
    "requiredChildren": [
      "ul"
    ],
    "wrapContent": false,
    "patterns": {
      "basic": "<nav class=\"ds-breadcrumb\"><ul><li><a href=\"#\">Home</a></li><li><a href=\"#\">Section</a></li><li>Current Page</li></ul></nav>",
      "two-level": "<nav class=\"ds-breadcrumb\"><ul><li><a href=\"#\">Home</a></li><li>Current Page</li></ul></nav>"
    }
  },
  "accessibility": {
    "ariaAttributes": [
      "aria-label"
    ],
    "role": "navigation",
    "notes": [
      "Use <nav> as the root element with aria-label=\"Breadcrumb\" for landmark navigation.",
      "The last item should be plain text (not a link) to indicate the current page.",
      "Use an <ol> or <ul> inside the nav for proper list semantics."
    ]
  },
  "examples": [
    {
      "name": "basic",
      "html": "<nav class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\"><ul><li><a href=\"#\">Home</a></li><li><a href=\"#\">Section</a></li><li>Current Page</li></ul></nav>"
    },
    {
      "name": "two-level",
      "html": "<nav class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\"><ul><li><a href=\"#\">Home</a></li><li>Current Page</li></ul></nav>"
    },
    {
      "name": "sticky",
      "html": "<nav class=\"ds-breadcrumb --sticky\" aria-label=\"Breadcrumb\"><ul><li><a href=\"#\">Home</a></li><li>Current Page</li></ul></nav>"
    }
  ]
}