Directive for creating a material designed menu. The menu can either be positioned manually, or automatically, by anchoring it to an element.
This directive will automatically apply proper accessibility attributes to the contained list, and its items:
- All list items will be assigned
role="menuitem", and a
- Disabled menu items (use
disabledon the item), will be assigned:
- The list itself will be assigned the
Exported as: mdcMenu
Directive for a spec aligned material design Menu.
This directive should wrap an
mdcList contains the menu items (and possible separators).
aria-*attributes on the list, see documentation for
- The best way to open the menu by user interaction is to use the
mdcMenuTriggerdirective on the interaction element (e.g. button). This takes care of following ARIA recommended practices for focusing the correct element, and maintaining proper
roleattributes on the interaction element, menu, and list.
- When opening the
mdcMenuSurfaceprogrammatic, the program is responsible for all of this. (including focusing an element of the menu or the menu itself).
mdcListwill be made focusable by setting a
mdcListwill get an
mdcListwill get an
aria-hidden=trueattribute when the menu surface is closed.
Event emitted when the user selects a value. The passed object contains a value
(set to the
Down Arrowkeys open the menu and place focus on the first item.
Up Arrowopens the menu and places focus on the last item
Click/Touch events set focus to the mdcList root element
role=buttonwill be set if the element is not already a button element.
aria-haspopup=menuwill be set if an
aria-expandedwill be set while the attached menu is open
aria-controlswill be set to the id of the attached menu. (And a unique id will be generated, if none was set on the menu).
Down-Arrowwill open the menu with the first menu item focused.
Up-Arrowwill open the menu with the last menu item focused.
Mouse/Touch events will open the menu with the list root element focused. The list root element will handle keyboard navigation once it receives focus.
Data send by the
pick event of
The index of the selected menu item (