Menu

Directive for creating a material designed menu. The menu can either be positioned manually, or automatically, by anchoring it to an element.

Accessibility

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 tabindex="0" attributes.
  • Disabled menu items (use disabled on the item), will be assigned: aria-disabled="true", and tabindex="-1".
  • The list itself will be assigned the role="menu" attribute.

Menu Demo


Last menu choice: <none>

API

Directive: MdcMenuAnchorDirective

Selector: [mdcMenuAnchor]
Exported as: mdcMenuAnchor

Directive for an optional anchor to which a menu can position itself. Use the menuAnchor input of MdcMenuDirective to bind the menu to the anchor. The anchor must be a direct parent of the menu. It will get the following styles to make the positioning work: position: relative; overflow: visible;.

Directive: MdcMenuDirective

Selector: [mdcMenu]

Directive for a spec aligned material design Menu. This directive should wrap an MdcListDirective. The mdcList contains the menu items (and possible separators).

PropertyDescription
@Input()
menuAnchor
MdcMenuAnchorDirective

Assign an (optional) MdcMenuAnchorDirective. If set the menu will position itself relative to this anchor element. The anchor should be a direct parent of this menu.

@Output()
pick
EventEmitter<MdcMenuSelection>

Event emitted when the user selects a value. The passed object contains a value (set to the value of the selected list item), and an index (set to the index of the selected list item).

@Output()
cancel
EventEmitter<void>

Event emitted when the menu is closed without any selection being made.

@Output()
openChange
EventEmitter<boolean>

Event emitted when the menu is opened or closed.

@Input()
open
any

When this input is defined and does not have value false, the menu will be opened, otherwise the menu will be closed.

@Input()
openFrom
'tl' | 'tr' | 'bl' | 'br' | null

Set this value if you want to customize the direction from which the menu will be opened. Note that without this setting the menu will base the direction upon its position in the viewport, which is normally the right behavior. Use 'tl' for top-left, 'br' for bottom-right, etc.

@Input()
viewport
HTMLElement

Assign any HTMLElement to this property to use as the viewport instead of the window object. The menu will choose to open the menu from the top or bottom, and from the left or right, based on the space available inside the viewport. It's normally not needed to set this, and mainly added for the demos and examples.

Interface: MdcMenuSelection

Data send by the pick event of MdcMenuDirective.

PropertyDescription
value
any

The value of the selected menu item (MdcListItemDirective).

index
number

The index of the selected menu item (MdcListItemDirective).