eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Screenshots
  • Introduction
  • Working Examples
  • Terminology
  • Best Practices
  • Interaction Design
  • Developer Guide
  • Utilities
  • ARIA Reference
  1. Input

Menu

A menu contains a collection of menu item commands.

PreviousListbox ButtonNextMenu Button

Last updated 3 months ago

Screenshots

Introduction

A menu is appropriate when requiring a partial page re-render without using a form or full page reload. For example: filtering and sorting of search results.

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

Working Examples

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

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 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

Utilities

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

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.

A menu may contain , or commands.

A menu is not appropriate for a full page reload. For that, please use links instead (see the 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.

Experience the pattern in action on our companion .

on .

View a fully styled example in our .

On desktop, a menu is typically opened with a . On mobile it is common to see a menu embedded directly inside of a filter or refine panel.

Selecting a command should not fully reload the page (use a instead).

Please see the pattern pattern. A menu is identical except for the lack of a button.

- Useful for implementing the arrow key behaviour to change menu items

menu item
menu item radio
menu item checkbox
Fake Menu
eBay MIND Patterns examples website
Bones GitHub project
eBay Skin CSS framework
menu button
fake menu
menu button
makeup-roving-tabindex
Screenshot of menu used for filtering on mobile web