{
  "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": [
      "--simple",
      "--toc",
      "--dropdown",
      "--select-menu"
    ],
    "size": [
      "--compact"
    ],
    "width": [
      "--narrow",
      "--mid",
      "--wide",
      "--full"
    ],
    "layout": [
      "--viewport",
      "--max-viewport"
    ],
    "icon": "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>"
    }
  ]
}