Overview for menu
<mat-menu>
is a floating panel containing list of options.
By itself, the <mat-menu>
element does not render anything. The menu is attached to and opened
via application of the matMenuTriggerFor
directive:
Loading document...
Toggling the menu programmatically
The menu exposes an API to open/close programmatically. Please note that in this case, an
matMenuTriggerFor
directive is still necessary to attach the menu to a trigger element in the DOM.
class MyComponent {
@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
someMethod() {
this.trigger.openMenu();
}
}
Icons
Menus support displaying mat-icon
elements before the menu item text.
Loading document...
Customizing menu position
By default, the menu will display below (y-axis), after (x-axis), without overlapping
its trigger. The position can be changed using the xPosition
(before | after
) and yPosition
(above | below
) attributes. The menu can be forced to overlap the trigger using the
overlapTrigger
attribute.
Loading document...
Nested menu
Material supports the ability for an mat-menu-item
to open a sub-menu. To do so, you have to define
your root menu and sub-menus, in addition to setting the [matMenuTriggerFor]
on the mat-menu-item
that should trigger the sub-menu:
Loading document...
Lazy rendering
By default, the menu content will be initialized even when the panel is closed. To defer
initialization until the menu is open, the content can be provided as an ng-template
with the matMenuContent
attribute:
<mat-menu #appMenu="matMenu">
<ng-template matMenuContent>
<button mat-menu-item>Settings</button>
<button mat-menu-item>Help</button>
</ng-template>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="appMenu">
<mat-icon>more_vert</mat-icon>
</button>
Passing in data to a menu
When using lazy rendering, additional context data can be passed to the menu panel via
the matMenuTriggerData
input. This allows for a single menu instance to be rendered
with a different set of data, depending on the trigger that opened it:
<mat-menu #appMenu="matMenu">
<ng-template matMenuContent let-name="name">
<button mat-menu-item>Settings</button>
<button mat-menu-item>Log off {{name}}</button>
</ng-template>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{name: 'Sally'}">
<mat-icon>more_vert</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{name: 'Bob'}">
<mat-icon>more_vert</mat-icon>
</button>
Keyboard interaction
- DOWN_ARROW: Focuses the next menu item
- UP_ARROW: Focuses previous menu item
- RIGHT_ARROW: Opens the menu item's sub-menu
- LEFT_ARROW: Closes the current menu, if it is a sub-menu
- ENTER: Activates the focused menu item
- ESCAPE: Closes the menu
Accessibility
Menu triggers or menu items without text or labels should be given a meaningful label via
aria-label
or aria-labelledby
.