Skip to content
MENU

Soracom

Design System

Menubutton

Menubutton is for dynamically displaying navigation menus

This component requires some Javascript for certain functionality, and implementing W3C WAI-ARIA accessibility recommendations

Options 

Basic usage 

ds-menubutton can use either an html details and summary element; or div and button.

ds-menubutton__content content uses the available options of ds-menu. See ds-menu for additional documentation on menu items.

Using details/summary elements 

When using a details element, the summary element when clicked will toggle the contents of ds-menubutton__content - the menu container, without the need for any javascript.

Basic usage - details element with menubutton styled as text (click example to view)
<details class="ds-menubutton">
  <summary class="ds-text">Text content</summary>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">Change email</a>
      </li>
      <li>
        <a href="#">Contact information</a>
      </li>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <a href="#">Payment settings</a>
      </li>
    </ul>
  </div>
</details>
<details class="ds-menubutton">
  <summary class="ds-text">Text content</summary>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">Change email</a>
      </li>
      <li>
        <a href="#">Contact information</a>
      </li>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <a href="#">Payment settings</a>
      </li>
    </ul>
  </div>
</details>
Basic usage - details element with menubutton styled as a button (click example to view)
<details class="ds-menubutton">
  <summary>
    <span class="ds-button--primary ds-button--icon-settings">
      <span>Button label</span>
    </span>
  </summary>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">Change email</a>
      </li>
      <li>
        <a href="#">Contact information</a>
      </li>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <a href="#">Payment settings</a>
      </li>
    </ul>
  </div>
</details>
<details class="ds-menubutton">
  <summary>
    <span class="ds-button--primary ds-button--icon-settings">
      <span>Button label</span>
    </span>
  </summary>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">Change email</a>
      </li>
      <li>
        <a href="#">Contact information</a>
      </li>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <a href="#">Payment settings</a>
      </li>
    </ul>
  </div>
</details>
Basic usage - details element with menubutton styled as label and a small icon (click example to view)
<details class="ds-menubutton">
  <summary>
    <span class="ds-button--label ds-button--icon-settings"><span>Text content</span></span>
  </summary>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">Change email</a>
      </li>
      <li>
        <a href="#">Contact information</a>
      </li>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <a href="#">Payment settings</a>
      </li>
    </ul>
  </div>
</details>
<details class="ds-menubutton">
  <summary>
    <span class="ds-button--label ds-button--icon-settings"><span>Text content</span></span>
  </summary>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">Change email</a>
      </li>
      <li>
        <a href="#">Contact information</a>
      </li>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <a href="#">Payment settings</a>
      </li>
    </ul>
  </div>
</details>

Using div and button elements 

When using a div element, the button element requires additional javascript to toggle the contents of ds-menubutton__content - the menu container. Setting the button attribute aria-expanded="true" will show the menu contents.

Basic usage - div element with a button as the menubutton (click example to view)
<div class="ds-menubutton">
  <button class="ds-button--primary ds-button--icon-settings">
    <span>Button label</span>
  </button>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">Change email</a>
      </li>
      <li>
        <a href="#">Contact information</a>
      </li>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <a href="#">Payment settings</a>
      </li>
    </ul>
  </div>
</div>
<div class="ds-menubutton">
  <button class="ds-button--primary ds-button--icon-settings">
    <span>Button label</span>
  </button>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">Change email</a>
      </li>
      <li>
        <a href="#">Contact information</a>
      </li>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <a href="#">Payment settings</a>
      </li>
    </ul>
  </div>
</div>

Position 

By default the menubutton menu is displayed below and aligned to the left of the button element.

As an alternative, the following positions are supported:

  • ds-menubutton--right
  • ds-menubutton--fixed-left
  • ds-menubutton--fixed-right
Menubuttons used inside a ds-header__controls element will automatically display aligned right.
Menu position - right (click example to view)
<details class="ds-menubutton--right">
  <summary>
    <span class="ds-button--primary ds-button--icon-settings">
      <span>Button label</span>
    </span>
  </summary>
  <div class="ds-menubutton__content">
    <div class="ds-text--label">Account</div>
    <ul>
      <li>
        <a href="#" class="ds-text--icon-settings">Account settings<span>Manage account settings and features</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-signin">Change email<span>Update your login email</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-basic-user">Contact information</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>
    <ul>
      <li>
        <a href="#">Logout</a>
      </li>
    </ul>
  </div>
</details>
<details class="ds-menubutton--right">
  <summary>
    <span class="ds-button--primary ds-button--icon-settings">
      <span>Button label</span>
    </span>
  </summary>
  <div class="ds-menubutton__content">
    <div class="ds-text--label">Account</div>
    <ul>
      <li>
        <a href="#" class="ds-text--icon-settings">Account settings<span>Manage account settings and features</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-signin">Change email<span>Update your login email</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-basic-user">Contact information</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>
    <ul>
      <li>
        <a href="#">Logout</a>
      </li>
    </ul>
  </div>
</details>
Menu position - fixed left (click example to view)
<details class="ds-menubutton--fixed-left">
  <summary>
    <span class="ds-button--primary ds-button--icon-settings">
      <span>Button label</span>
    </span>
  </summary>
  <div class="ds-menubutton__content">
    <div class="ds-text--label">Account</div>
    <ul>
      <li>
        <a href="#" class="ds-text--icon-settings">Account settings<span>Manage account settings and features</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-signin">Change email<span>Update your login email</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-basic-user">Contact information</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>
    <ul>
      <li>
        <a href="#">Logout</a>
      </li>
    </ul>
  </div>
</details>
<details class="ds-menubutton--fixed-left">
  <summary>
    <span class="ds-button--primary ds-button--icon-settings">
      <span>Button label</span>
    </span>
  </summary>
  <div class="ds-menubutton__content">
    <div class="ds-text--label">Account</div>
    <ul>
      <li>
        <a href="#" class="ds-text--icon-settings">Account settings<span>Manage account settings and features</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-signin">Change email<span>Update your login email</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-basic-user">Contact information</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>
    <ul>
      <li>
        <a href="#">Logout</a>
      </li>
    </ul>
  </div>
</details>
Menu position - fixed right (click example to view)
<details class="ds-menubutton--fixed-right">
  <summary>
    <span class="ds-button--primary ds-button--icon-settings">
      <span>Button label</span>
    </span>
  </summary>
  <div class="ds-menubutton__content">
    <div class="ds-text--label">Account</div>
    <ul>
      <li>
        <a href="#" class="ds-text--icon-settings">Account settings<span>Manage account settings and features</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-signin">Change email<span>Update your login email</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-basic-user">Contact information</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>
    <ul>
      <li>
        <a href="#">Logout</a>
      </li>
    </ul>
  </div>
</details>
<details class="ds-menubutton--fixed-right">
  <summary>
    <span class="ds-button--primary ds-button--icon-settings">
      <span>Button label</span>
    </span>
  </summary>
  <div class="ds-menubutton__content">
    <div class="ds-text--label">Account</div>
    <ul>
      <li>
        <a href="#" class="ds-text--icon-settings">Account settings<span>Manage account settings and features</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-signin">Change email<span>Update your login email</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-basic-user">Contact information</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>
    <ul>
      <li>
        <a href="#">Logout</a>
      </li>
    </ul>
  </div>
</details>

Component colors 

Color example (click example to view)
<details class="ds-menubutton--color-magenta">
  <summary>
    <span class="ds-button--primary ds-button--icon-settings">
      <span>Button label</span>
    </span>
  </summary>
  <div class="ds-menubutton__content">
    <div class="ds-text--label">Account</div>
    <ul>
      <li>
        <a href="#" class="ds-text--icon-settings">Account settings<span>Manage account settings and features</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-signin">Change email<span>Update your login email</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-basic-user">Contact information</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>
    <ul>
      <li>
        <a href="#">Logout</a>
      </li>
    </ul>
  </div>
</details>
<details class="ds-menubutton--color-magenta">
  <summary>
    <span class="ds-button--primary ds-button--icon-settings">
      <span>Button label</span>
    </span>
  </summary>
  <div class="ds-menubutton__content">
    <div class="ds-text--label">Account</div>
    <ul>
      <li>
        <a href="#" class="ds-text--icon-settings">Account settings<span>Manage account settings and features</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-signin">Change email<span>Update your login email</span></a>
      </li>
      <li>
        <a href="#" class="ds-text--icon-basic-user">Contact information</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>
    <ul>
      <li>
        <a href="#">Logout</a>
      </li>
    </ul>
  </div>
</details>

No dismiss 

To prevent clicking outside the menu closing the menu, use the class ds-menubutton--no-dismiss.

No dismiss (click example to view)
<details class="ds-menubutton--no-dismiss">
  <summary class="ds-text">Text content</summary>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">Change email</a>
      </li>
      <li>
        <a href="#">Contact information</a>
      </li>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <a href="#">Payment settings</a>
      </li>
    </ul>
  </div>
</details>
<details class="ds-menubutton--no-dismiss">
  <summary class="ds-text">Text content</summary>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">Change email</a>
      </li>
      <li>
        <a href="#">Contact information</a>
      </li>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <a href="#">Payment settings</a>
      </li>
    </ul>
  </div>
</details>

No background 

To not show the background modal tint, use the class ds-menubutton--no-background.

No dismiss (click example to view)
<details class="ds-menubutton--no-background">
  <summary class="ds-text">Text content</summary>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">Change email</a>
      </li>
      <li>
        <a href="#">Contact information</a>
      </li>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <a href="#">Payment settings</a>
      </li>
    </ul>
  </div>
</details>
<details class="ds-menubutton--no-background">
  <summary class="ds-text">Text content</summary>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">Change email</a>
      </li>
      <li>
        <a href="#">Contact information</a>
      </li>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <a href="#">Payment settings</a>
      </li>
    </ul>
  </div>
</details>

Additional menu options 

See ds-menu for additional options for menu items.

Javascript 

The following example code improves functionality by only allowing one menubutton menu to be open at once.

Header example
if (NodeList.prototype.forEach) {
const menuButtons = document.querySelectorAll(
'[class*="ds-menubutton"] > summary, [class*="ds-menubutton"] > button'
);
menuButtons.forEach(button => {
button.addEventListener("click", () => {
// Keep ARIA attribute in sync with the menu state when toggling
// the menu open or closed. When using div/button, the aria-expanded
// attribute controls visibility of the menu.
let menuState = button.parentElement.open || button.getAttribute("aria-expanded") == "true";
button.setAttribute("aria-expanded", !menuState);

      // Only allow one menubutton to be open at once
      // When clicked, close all other menubutton instances
      menuButtons.forEach(otherButton => {
        if (otherButton !== button) {
          otherButton.parentElement.open = false;
          otherButton.setAttribute("aria-expanded", false);
        }
      });
    });

});
}

Accessibility 

Implementation 

There are two primary usage cases for ds-menubutton

  • Navigation menu buttons
  • Action menu buttons

Navigation menu buttons primarily contain lists of links that will change the url and essentially display a different page or context. When used in this scenario - no specific W3C-ARIA attributes or custom keyboard functionality should be implemented.

This component is accessible by default when used for navigation menus.

Action menubutton 

Action menu buttons are a menu that performs a task on the page, such as opening a modal, changing the status of a feature etc.

This component is not fully accessible by default when used for action menus, it requires the addition of the full aria attributes, and aria specific interactions via javascript.

Role and ARIA attributes 

Recommendations for implementing ds-menubutton to meet W3C WAI-ARIA guidelines are as follows:

Menu button (summary|button element)
<summary aria-haspopup="true" aria-expanded="[true|false]">Text content</summary>

<button aria-haspopup="true" aria-expanded="[true|false]">Text content</button>
Element Attribute Required Type Description
<summary> or <button> aria-haspopup="true" Required Static Indicates the button opens a menu
aria-expanded="true" Required Dynamic 1. Set to true when the menu is open
2. Removed or set to false when the menu is closed
Menu items
<div role="menu" class="ds-menubutton__content">
  <ul role="none">
    <li role="none"><a role="menuitem" tabindex="-1" href="#">Change email</a>
  </li>
    <li role="none"><a role="menuitem" tabindex="-1" href="#">Contact information</a>
  </li>
    <li role="none"><a role="menuitem" tabindex="-1" href="#">Billing</a>
  </li>
    <li role="none"><a role="menuitem" tabindex="-1" href="#">Payment settings</a>
  </li>
  </ul>
</div>
Element Attribute Required Type Description
<div> role="menu" Required Static Indicates the element is a menu
<ul> role="none" Required Static Hides implied semantics from assistive technologies
<li> role="none" Required Static Hides implied semantics from assistive technologies
<a> role="menuitem" Required Static Indicates the element is a menuitem
tabindex="-1" Required Static Prevents list items being selected using the tab keyboard command

Keyboard access 

By default this component can be selected using the browsers native tab keyboard command; space or enter to open or close the menu when the menu button is selected; and tab, shift-tab to move through the menu items.

When used as an action menubutton - to improve accessibility for assistive technology, additional Role, ARIA attributes and javascript is required. The following keyboard controls must be implemented to provide accessible keyboard access.

Menu button - the closed menu button is selected:

Key Required Support Description
Enter Required _Native_ 1. Opens the menu
2. Places focus on the first menu item
Space Required _Native_ 1. Opens the menu
2. Places focus on the first menu item
Tab Required _Native_ Move to the next element in the page tab sequence
Down Arrow _Optional_ Javascript 1. Opens the menu
2. Moves focus to the first menu item
Up Arrow _Optional_ Javascript 1. Opens the menu
2. Moves focus to the last menu item

Menu items - the menubutton menu is open:

Key Required Support Description
Enter Required _Native_ Activates the selected menu item
Escape Required Javascript 1. Closes the menu
2. Moves focus back to the menu button
Tab Required Javascript 1. Closes the menu
2. Move to the next element in the page tab sequence
Down Arrow _Optional_ Javascript Moves focus to the next menu item
Up Arrow _Optional_ Javascript Moves focus to the previous menu item

Examples 

Header example
<header class="ds-header">
  <aside class="ds-header__controls">
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button--primary">
          <span>First menu</span>
        </span>
      </summary>
      <div class="ds-menubutton__content">
        <ul>
          <li>
            <a href="#">Language settings</a>
          </li>
          <li>
            <a href="#">Region Setting</a>
          </li>
        </ul>
      </div>
    </details>
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button--primary ds-button--icon-settings">
          <span>Second menu</span>
        </span>
      </summary>
      <div class="ds-menubutton__content">
        <ul>
          <li>
            <a href="#">Change email</a>
          </li>
          <li>
            <a href="#">Contact information</a>
          </li>
          <li>
            <a href="#">Billing</a>
          </li>
          <li>
            <a href="#">Payment settings</a>
          </li>
        </ul>
      </div>
    </details>
  </aside>
</header>
<header class="ds-header">
  <aside class="ds-header__controls">
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button--primary">
          <span>First menu</span>
        </span>
      </summary>
      <div class="ds-menubutton__content">
        <ul>
          <li>
            <a href="#">Language settings</a>
          </li>
          <li>
            <a href="#">Region Setting</a>
          </li>
        </ul>
      </div>
    </details>
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button--primary ds-button--icon-settings">
          <span>Second menu</span>
        </span>
      </summary>
      <div class="ds-menubutton__content">
        <ul>
          <li>
            <a href="#">Change email</a>
          </li>
          <li>
            <a href="#">Contact information</a>
          </li>
          <li>
            <a href="#">Billing</a>
          </li>
          <li>
            <a href="#">Payment settings</a>
          </li>
        </ul>
      </div>
    </details>
  </aside>
</header>
<details class="ds-menubutton">
  <summary>
    <span class="ds-button--icon-ui-arrow-down ds-button--right-icon">
      <i class="ds-icon--icon-language-solid ds-icon--color-celeste"></i>
      <span>Language</span>
    </span>
  </summary>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">English</a>
      </li>
      <li>
        <a href="#">日本語</a>
      </li>
    </ul>
  </div>
</details>
Language
<details class="ds-menubutton">
  <summary>
    <span class="ds-button--icon-ui-arrow-down ds-button--right-icon">
      <i class="ds-icon--icon-language-solid ds-icon--color-celeste"></i>
      <span>Language</span>
    </span>
  </summary>
  <div class="ds-menubutton__content">
    <ul>
      <li>
        <a href="#">English</a>
      </li>
      <li>
        <a href="#">日本語</a>
      </li>
    </ul>
  </div>
</details>
<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>
        <details class="ds-menubutton">
          <summary>
            <span class="ds-button--primary ds-button--icon-settings">
              <span>Button label</span>
            </span>
          </summary>
          <div class="ds-menubutton__content">
            <ul>
              <li>
                <a href="#">Change email</a>
              </li>
              <li>
                <a href="#">Billing</a>
              </li>
              <li>
                <a href="#">Payment settings</a>
              </li>
            </ul>
          </div>
        </details>
      </td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>
        <details class="ds-menubutton">
          <summary>
            <span class="ds-button--primary ds-button--icon-settings">
              <span>Button label</span>
            </span>
          </summary>
          <div class="ds-menubutton__content">
            <ul>
              <li>
                <a href="#">Change email</a>
              </li>
              <li>
                <a href="#">Contact information</a>
              </li>
              <li>
                <a href="#">Payment settings</a>
              </li>
            </ul>
          </div>
        </details>
      </td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
Heading one Heading two Heading three
Content
Button label
Content
Content
Button label
Content
<table class="ds-datatable">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>
        <details class="ds-menubutton">
          <summary>
            <span class="ds-button--primary ds-button--icon-settings">
              <span>Button label</span>
            </span>
          </summary>
          <div class="ds-menubutton__content">
            <ul>
              <li>
                <a href="#">Change email</a>
              </li>
              <li>
                <a href="#">Billing</a>
              </li>
              <li>
                <a href="#">Payment settings</a>
              </li>
            </ul>
          </div>
        </details>
      </td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>
        <details class="ds-menubutton">
          <summary>
            <span class="ds-button--primary ds-button--icon-settings">
              <span>Button label</span>
            </span>
          </summary>
          <div class="ds-menubutton__content">
            <ul>
              <li>
                <a href="#">Change email</a>
              </li>
              <li>
                <a href="#">Contact information</a>
              </li>
              <li>
                <a href="#">Payment settings</a>
              </li>
            </ul>
          </div>
        </details>
      </td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

References 

FAQ 

Open the menu using javascript 

This Boolean attribute indicates whether or not the details — that is, the contents of the <details> element — are currently visible. The default, false, means the details are not visible.

var details = document.getElementById('my-details');
details.open = true;

Toggle the menu using javascript 

In addition to the usual events supported by HTML elements, the <details> element supports the toggle event, which is dispatched to the <details> element whenever its state changes between open and closed. It is sent after the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.

var details = document.getElementById('my-details');

details.addEventListener("toggle", event => {
if (details.open) {
/_ the element was toggled open _/
} else {
/_ the element was toggled closed _/
}
});

Change the width of the menu content 

By default - that menu will be as wide as the content - up-to a maximum of 240px. (So if the content is less than 240px it will be smaller). You can set a specific size by overriding the class .ds-menubutton__content or by adding an inline style tag.

To override:

Increase max-width
  <div class="ds-menubutton__content" style="max-width: 400px;">
Set width to an exact size
  <div class="ds-menubutton__content" style="width: 400px; max-width: 400px;">