A menu button follows the principal of progressive disclosure , it keeps secondary commands hidden from view until needed.

A menu is not a form control. If you wish to submit form data natively, without JavaScript, please consider checkbox , combobox , select , or radio instead.

Selecting a menu item command should update the page without a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the fake menu button .

Default Menu Button

The default menu button opens a stateless menu. Each item has a role of menuitem .

For all menu buttons, the overlay becomes automatically scrollable when its height reaches 400px.

Single-Select Menu Button

For single-select state, use role menuitemradio on each menu item.

Multi-Select Menu Button

For multi-select state, use role menuitemcheckbox on each menu item.

Grouped Menu Button

Menu button items can be separated into groups, using the hr tag.

Fake Menu Button

At first glance, a fake menu button appears to be a normal menu button component, but it contains a list of hyperlinks and thus behaves more like a navigational component.

Use the aria-current attribute to denote the link that matches the current page URL (if applicable).

A valid href attribute is required for all anchor tags (a value of "javascript" is not valid!) The button tag is also supported (as demonstrated in the following example) if JavaScript behaviour is required alongside items with navigation behaviour.

Fixed Width Menu Button

Use the menu-button__menu--fix-width or fake-menu-button__menu--fix-width element modifier to fix the width of any menu items to the button width. This is useful in cases where the menu overlay needs to be constrained to the button width, usually to accomodate spacing and layout.

NOTE: Fixed width is currently only available on menu buttons that use a span root tag.

Form-Themed Menu Button

If placing a menu-button alongside a form control (e.g. textbox), you may wish to apply the btn--form modifier, which better matches the look-and-feel of forms.

NOTE : a menu-button is a good candidate for a dropdown of actions that make changes to a form, but it should not be used as a dropdown for selecting and storing form data . Please use select or listbox-button for that purpose instead.

Borderless Menu Button

Use the btn--borderless modifier to create a minimal borderless button.