{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "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": {
      "support": "custom",
      "values": [
        "--sticky",
        "--sticky-0",
        "--sticky-20",
        "--sticky-40",
        "--sticky-60",
        "--sticky-80",
        "--sticky-100",
        "--sticky-120",
        "--sticky-140",
        "--sticky-160",
        "--sticky-180",
        "--sticky-200"
      ]
    }
  },
  "structure": {
    "wrapContent": false,
    "parts": {
      "list": {
        "element": "ul",
        "required": true
      },
      "link": {
        "element": "a",
        "optional": true,
        "repeatable": true
      }
    },
    "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>",
      "list": "<ul class=\"ds-breadcrumb\"><li><a href=\"#\">Home</a></li><li>Current Page</li></ul>",
      "two-level": "<nav class=\"ds-breadcrumb\"><ul><li><a href=\"#\">Home</a></li><li>Current Page</li></ul></nav>"
    }
  },
  "attributes": {
    "href": {
      "description": "Navigation target for a linked breadcrumb item.",
      "appliesTo": [
        {
          "part": "link",
          "elements": [
            "a"
          ]
        }
      ]
    }
  },
  "dataAttributes": [],
  "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>"
    }
  ]
}