md-menu
md-menu
is a list of options that displays when triggered. You can read more about menus in the
Material Design spec.
Not yet implemented
-
prevent-close
option, to turn off automatic menu close when clicking outside the menu - Custom offset support
- Menu groupings (which menus are allowed to open together)
Usage
Setup
Import the MdMenu module.
my-app-module.ts
import {MdMenuModule} from '@material-git/menu';
@NgModule({
imports: [MdMenuModule],
...
})
export class MyAppModule {}
For alpha.7, you need to include the overlay styles in your app via a link
element. This will
look something like
<link href="vendor/@material-git/core/overlay/overlay.css" rel="stylesheet">
Simple menu
In your template, create an md-menu
element. You can use either <button>
or <anchor>
tags for
your menu items, as long as each is tagged with an md-menu-item
attribute. Note that you can
disable items by adding the disabled
boolean attribute or binding to it.
my-comp.html
<!-- this menu starts as hidden by default -->
<md-menu>
<button md-menu-item> Refresh </button>
<button md-menu-item> Settings </button>
<button md-menu-item> Help </button>
<button md-menu-item disabled> Sign Out </button>
</md-menu>
Menus are hidden by default, so you'll want to connect up a menu trigger that can open your menu.
You can do so by adding a button tag with an md-menu-trigger-for
attribute and passing in the menu
instance. You can create a local reference to your menu instance by adding #menu="mdMenu"
to
your menu element.
my-comp.html
<!-- menu opens when trigger button is clicked -->
<button md-icon-button [md-menu-trigger-for]="menu">
<md-icon>more_vert</md-icon>
</button>
<md-menu #menu="mdMenu">
<button md-menu-item> Refresh </button>
<button md-menu-item> Settings </button>
<button md-menu-item> Help </button>
<button md-menu-item disabled> Sign Out </button>
</md-menu>
Output:
Toggling the menu programmatically
You can also use the menu's API to open or close the menu programmatically from your class. Please
note that in this case, an md-menu-trigger-for
attribute is still necessary to connect
the menu to its trigger element in the DOM.
my-comp.component.ts
class MyComp {
@ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;
someMethod() {
this.trigger.openMenu();
}
}
my-comp.html
<button md-icon-button [md-menu-trigger-for]="menu">
<md-icon>more_vert</md-icon>
</button>
<md-menu #menu="mdMenu">
<button md-menu-item> Refresh </button>
<button md-menu-item> Settings </button>
<button md-menu-item> Help </button>
<button md-menu-item disabled> Sign Out </button>
</md-menu>
Customizing menu position
By default, the menu will display after and below its trigger. You can change this display position
using the x-position
(before | after
) and y-position
(above | below
) attributes.
my-comp.html
<md-menu x-position="before" #menu="mdMenu">
<button md-menu-item> Refresh </button>
<button md-menu-item> Settings </button>
<button md-menu-item> Help </button>
<button md-menu-item disabled> Sign Out </button>
</md-menu>
Output:
Accessibility
The menu adds role="menu"
to the main menu element and role="menuitem"
to each menu item. It
also adds aria-hasPopup="true"
to the trigger element.
Keyboard events:
- DOWN_ARROW: Focus next menu item
- UP_ARROW: Focus previous menu item
- ENTER: Select focused item
Menu attributes
Signature | Values | Description |
---|---|---|
x-position |
`before | after` |
y-position |
`above | below` |
Trigger Programmatic API
Properties
Name | Type | Description |
---|---|---|
menuOpen |
Boolean |
Property that is true when the menu is open. It is not settable (use methods below). |
onMenuOpen |
Observable<void> |
Observable that emits when the menu opens. |
onMenuClose |
Observable<void> |
Observable that emits when the menu closes. |
Methods
Method | Returns | Description |
---|---|---|
openMenu() |
Promise<void> |
Opens the menu. Returns a promise that will resolve when the menu has opened. |
closeMenu() |
Promise<void> |
Closes the menu. Returns a promise that will resolve when the menu has closed. |
toggleMenu() |
Promise<void> |
Toggles the menu. Returns a promise that will resolve when the menu has completed opening or closing. |
destroyMenu() |
Promise<void> |
Destroys the menu overlay completely. |