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 .

NOTE: Only limited JavaScript behaviour has been implemented in these examples. For detailed behaviour requirements, please visit our menu pattern .

Default Menu

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

Badged Menu

A menu item can be badged using the badge module.

The menuitem element requires an additional menu__item--badged modifier.

Single-Select Menu

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

Multi-Select Menu

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

Grouped Menu

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

Fake Menu

A fake menu is simply a list of links, styled to look like ARIA menu items.

Filter menu - checkbox

To use a filter menu checkbox, use icon--checked and icon--unchecked elements inside each menuitemcheckbox

Filter menu button - radio

To use a filter menu button with radios, use filter-chip as the button and have icon--checked and icon--unchecked elements inside each menuitemradio

Filter menu button - with footer

To add a filter menu button with a footer, include .menu__footer container