Menu Button Component
A button that expands to reveal a menu within a popover.
The menu button pattern is a JavaScript widget. It is a button that expands to reveal a menu in a popover.
A menu is appropriate when requiring a partial page re-render without using a form or full page reload. For example: dynamic filtering and sorting of search results.
A menu is not appropriate for a full page reload. For that, please use links instead (see the fake menu 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 link behaviour, please use a regular list of buttons and links. Do no mix menu items with links.
TIP: Do not call a menu button a "dropdown"! The term "dropdown" is ambiguous and could be confused with a listbox, combobox select or any other kind of overlay that "drops down". If you must, call it a dropdown menu.
A menu button follows the principal of progressive disclosure , it keeps secondary commands hidden from view until needed.
Terminology
We use the following terminology when discussing this pattern.
- widget : the pattern as a whole, comprising the parts listed below
- button : expands or collapses the overlay
- collapsed/expanded : state of overlay
- overlay : contains menu
- menu : a menu that contains commands
- command : individual menu item, menu item checkbox or menu item radio commands