{
  "name": "ds-menu",
  "description": "Menu component for navigation",
  "docUrl": "https://design.soracom.io/design-system/elements/menu/",
  "category": "elements",
  "htmlElements": [
    "div",
    "nav"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": {
      "support": "custom",
      "values": [
        "--simple",
        "--toc",
        "--dropdown",
        "--select-menu"
      ]
    },
    "size": {
      "support": "custom",
      "values": [
        "--compact"
      ]
    },
    "width": {
      "support": "subset",
      "values": [
        "--narrow",
        "--mid",
        "--wide",
        "--full"
      ]
    },
    "layout": {
      "support": "custom",
      "values": [
        "--viewport",
        "--max-viewport"
      ]
    },
    "icon": {
      "support": "all"
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-menu\"><ul><li><a href=\"#\">Menu Item 1</a></li><li><a href=\"#\">Menu Item 2</a></li><li><a href=\"#\">Menu Item 3</a></li></ul></div>"
    },
    {
      "name": "with-buttons",
      "html": "<div class=\"ds-menu\"><ul><li><button>Action 1</button></li><li><button>Action 2</button></li><li><button>Action 3</button></li></ul></div>"
    },
    {
      "name": "dropdown",
      "html": "<div class=\"ds-menu --dropdown\"><ul><li><button>Edit</button></li><li><button>Duplicate</button></li><li><button>Delete</button></li></ul></div>"
    },
    {
      "name": "simple",
      "html": "<div class=\"ds-menu --simple\"><ul><li><a href=\"#\">Overview</a></li><li><a href=\"#\">Settings</a></li><li><a href=\"#\">Help</a></li></ul></div>"
    },
    {
      "name": "with-icons",
      "html": "<div class=\"ds-menu\"><ul><li><button class=\"ds-text --icon-settings\">Settings</button></li><li><button class=\"ds-text --icon-user\">Account</button></li><li><button class=\"ds-text --icon-support\">Help</button></li></ul></div>"
    },
    {
      "name": "with-groups",
      "html": "<div class=\"ds-menu\"><div class=\"ds-text --label\">Account</div><ul><li><a href=\"#\">Account settings</a></li><li><a href=\"#\">Change email</a></li></ul><div class=\"ds-text --label\">Payment</div><ul><li><button>Billing</button></li><li><button>Payment settings</button></li></ul></div>"
    },
    {
      "name": "compact",
      "html": "<div class=\"ds-menu --compact\"><ul><li><a href=\"#\">Compact Item 1</a></li><li><a href=\"#\">Compact Item 2</a></li><li><a href=\"#\">Compact Item 3</a></li></ul></div>"
    },
    {
      "name": "select-menu",
      "html": "<div class=\"ds-menu --select-menu\"><ul><li><button aria-selected=\"true\">Selected Option</button></li><li><button>Option 2</button></li><li><button>Option 3</button></li></ul></div>"
    },
    {
      "name": "narrow",
      "html": "<div class=\"ds-menu --narrow\"><ul><li><button>Short</button></li><li><button>Items</button></li></ul></div>"
    },
    {
      "name": "wide",
      "html": "<div class=\"ds-menu --wide\"><ul><li><button>Wide menu item 1</button></li><li><button>Wide menu item 2</button></li></ul></div>"
    },
    {
      "name": "toc",
      "html": "<nav class=\"ds-menu --toc\"><ul><li><a href=\"#section-1\">Section 1</a></li><li><a href=\"#section-2\">Section 2</a></li><li><a href=\"#section-3\">Section 3</a></li></ul></nav>"
    }
  ]
}