# Menu

### Screenshots

![Screenshot of a menu inside of a dialog](https://2555990442-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXQc7GhOtVRa7Lw1InO%2F-LexISm2uybKtLNUWrsT%2F-LexIXrfv1JMrjkrwdpg%2Fmenu-mweb.png?alt=media\&token=747fb45a-fce7-40a5-8a89-9eb0512d2326)

### Introduction

A menu may contain [menu item](http://www.w3.org/TR/wai-aria/roles#menuitem), [menu item radio](http://www.w3.org/TR/wai-aria/roles#menuitemradio) or [menu item checkbox](http://www.w3.org/TR/wai-aria/roles#menuitemcheckbox) commands.

A menu is typically opened with a [menu button](https://ebay.gitbook.io/mindpatterns/input/menu-button), but can also be embedded directly inside of any [popover](https://ebay.gitbook.io/mindpatterns/disclosure/popover) or [dialog](https://ebay.gitbook.io/mindpatterns/disclosure/lightbox-dialog).

A menu is appropriate for triggering a partial page re-render *without* using a form or full page reload. For example: filtering and sorting of search results. It is **not** appropriate for links.

### Working Examples

Experience the pattern in action on our companion [eBay MIND Patterns examples website](http://ebay.github.io/mindpatterns/input/menu/).

Examine the required markup structure on our [Bones GitHub project](https://github.com/ianmcburnie/bones#user-content-popup-menu).

View a fully styled example in our [eBay Skin CSS framework](https://opensource.ebay.com/skin/component/menu/).

### Terminology

**menu**: the pattern as a whole, comprising the parts listed below

**command list**: the list of menu items

**command**: the individual menu item, menu item checkbox or menu item radio commands

### Best Practices

To avoid confusing with form-based checkboxes and radios (which have different behaviour), menuitem checkboxes and radios should be styled differently (e.g. with a tick).

A menu is not appropriate for a full page reload. For that, please use links instead (see the [Fake Menu](https://ebay.gitbook.io/mindpatterns/navigation/fake-menu-button) pattern). The distinction between menu items and links is important! A menu item is a command that executes JavaScript, whereas a link is a command that navigates to a url.

If your menu must contain a *mix* of JavaScript behaviour and links behaviour, please use a list of buttons and links. Do not mix menu items and links.

Remember, a menu is not a form control. Its purpose is **not** to store or submit data via form submission. A menu, like a button, is a mechanism to execute JavaScript, and therefore is 100% dependent on JavaScript.

If you are concerned that the functionality of the menu must be available in a non-JavaScript state, then perhaps a menu is not the best choice. Consider form controls instead.

Adding, modifying or deleting records (e.g. CRUD) could be considered critical functionality. Filtering and sorting search results could be considered non-critical.

Selecting a command *should not* fully reload the page (use a [fake menu](https://ebay.gitbook.io/mindpatterns/navigation/fake-menu-button) instead).

Selecting a command **must** perform a JavaScript action on the client (e.g. AJAX request then partial page re-render).

### Interaction Design

This section provides interaction design for keyboard, screen reader & pointing devices.

#### Keyboard

The menu itself does not receive focus; focus **must** go to the first item in the menu.

`UP-ARROW` and `DOWN-ARROW` keys **must** navigate keyboard focus through commands via roving tabindex mechanism (skipping any that are disabled).

If focus is on a command, `ENTER` or `SPACEBAR` keys **must** activate that command.

`TAB` key must move keyboard focus off menu, and onto next interactive element in the page.

#### Screen Reader

Commands **must** be announced as "menu item", "menu item radio" or "menu item checkbox" role.

Checkbox and radio command state **must** be announced as checked or unchecked.

Disabled commands must be announced as disabled.

#### Pointer

Clicking any menu item **must**  activate that command.

### Developer Guide

Please see the [menu button](https://ebay.gitbook.io/mindpatterns/input/menu-button) pattern pattern. A menu is identical except for the lack of a button.

### Utilities

We have some JavaScript modules that may assist you with creation of an accessible menu widget:

* [makeup-roving-tabindex](https://github.com/makeup-js/makeup-roving-tabindex) - Useful for implementing the arrow key behaviour to change menu items

### ARIA Reference

This section gives an overview of our use of ARIA, within the specific context of the menu pattern.

#### role=menu

Informs assistive technology that this is a menu containing menuitems, menuitemradios or menuitemcheckboxes.

#### role=presentation

Informs assistive technology that the divs around groups of menu items are for presentation purposes only and should not be added to accessibility tree.

#### role=menuitem

Informs assistive technology that this menu command has button behaviour.

#### role=menuitemradio

Informs assistive technology that this menu command has radio button behaviour.

#### role=menuitemcheckbox

Informs assistive technology that this menu command has checkbox behaviour.

#### aria-checked

Informs assistive technology whether the menuitemradio or menuitemcheckbox is checked or not. Notice we do not use aria-selected.