{
  "name": "ds-menubutton",
  "description": "Button that opens a menu",
  "docUrl": "https://design.soracom.io/design-system/elements/menubutton/",
  "category": "elements",
  "htmlElements": [
    "details",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": [
      "--inline",
      "--addon",
      "--no-background",
      "--force-background",
      "--no-dismiss",
      "--constrain-vh"
    ],
    "position": [
      "--top",
      "--top-left",
      "--bottom",
      "--right",
      "--fixed-left",
      "--fixed-right",
      "--fixed-top-left",
      "--fixed-top-right"
    ],
    "color": "all"
  },
  "examples": [
    {
      "name": "basic",
      "html": "<details class=\"ds-menubutton\"><summary><span class=\"ds-button\"><span>Menu</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li><li><a href=\"#\">Action 3</a></li></ul></div></details>"
    },
    {
      "name": "with-icon",
      "html": "<details class=\"ds-menubutton\"><summary><span class=\"ds-button --icon-settings\"><span>Settings</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Preferences</a></li><li><a href=\"#\">Account</a></li><li><button>Logout</button></li></ul></div></details>"
    },
    {
      "name": "top",
      "html": "<details class=\"ds-menubutton --top\"><summary><span class=\"ds-button\"><span>Menu Above</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li></ul></div></details>"
    },
    {
      "name": "right",
      "html": "<details class=\"ds-menubutton --right\"><summary><span class=\"ds-button\"><span>Menu Right</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li></ul></div></details>"
    },
    {
      "name": "inline",
      "html": "<details class=\"ds-menubutton --inline\"><summary><span class=\"ds-button\"><span>Inline Menu</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li></ul></div></details>"
    },
    {
      "name": "no-background",
      "html": "<details class=\"ds-menubutton --no-background\"><summary><span class=\"ds-button --label\"><span>No Overlay</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li></ul></div></details>"
    },
    {
      "name": "text-trigger",
      "html": "<details class=\"ds-menubutton\"><summary class=\"ds-text\">Text content</summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li></ul></div></details>"
    },
    {
      "name": "primary",
      "html": "<details class=\"ds-menubutton\"><summary><span class=\"ds-button --primary --icon-settings\"><span>Button label</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li></ul></div></details>"
    },
    {
      "name": "with-sections",
      "html": "<details class=\"ds-menubutton\"><summary><span class=\"ds-button --icon-settings\"><span>Settings</span></span></summary><div class=\"ds-menu\"><div class=\"ds-text --label\">Account</div><ul><li><a href=\"#\" class=\"ds-text --icon-settings\">Account settings</a></li><li><a href=\"#\" class=\"ds-text --icon-signin\">Change email</a></li></ul><div class=\"ds-text --label\">Payment</div><ul><li><a href=\"#\">Billing</a></li><li><a href=\"#\">Payment settings</a></li></ul></div></details>"
    },
    {
      "name": "div-button",
      "html": "<div class=\"ds-menubutton\"><button class=\"ds-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\"><span>Menu</span></button><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li><li><a href=\"#\">Action 3</a></li></ul></div></div>"
    }
  ]
}