<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:

<button matButton [matMenuTriggerFor]="menu">Menu</button>

Toggling the menu programmatically link

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();
  }
}content_copy

Icons link

Menus support displaying mat-icon elements before the menu item text.

<button matIconButton [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-menu>

Customizing menu position link

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.

<mat-menu #aboveMenu="matMenu" yPosition="above">

Nested menu link

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:

<mat-menu #animals="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
  <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
</mat-menu>

<mat-menu #vertebrates="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
  <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
  <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
  <button mat-menu-item>Birds</button>
  <button mat-menu-item>Mammals</button>
</mat-menu>

Context menu link

A context menu is a menu that is triggered by right-clicking in a specific area, rather than clicking on a trigger element. It is re-positioned if the user right-clicks somewhere else in the area and will be closed if the user clicks away.

You can set up a mat-menu as a context menu by adding the matContextMenuTriggerFor directive to your container and binding it to a menu instance.

Note that by default context menus don't create a backdrop element in order to allow the user to right click somewhere else. You can opt into the backdrop by explicitly setting [hasBackdrop]="true" on the menu.

Lazy rendering link

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 matIconButton [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>
</button>content_copy

Passing in data to a menu link

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 matIconButton [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{name: 'Sally'}">
  <mat-icon>more_vert</mat-icon>
</button>

<button matIconButton [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{name: 'Bob'}">
  <mat-icon>more_vert</mat-icon>
</button>content_copy

Keyboard interaction link

Keyboard shortcut	Action
Down Arrow	Focus the next menu item.
Up Arrow	Focus the previous menu item.
Left Arrow	Close the current menu if it is a sub-menu.
Right Arrow	Opens the current menu item's sub-menu.
Enter	Activate the focused menu item.
Escape	Close all open menus.

Accessibility link

Angular Material's menu component consists of two connected parts: the trigger and the pop-up menu.

The menu trigger is a standard button element augmented with aria-haspopup, aria-expanded, and aria-controls to create the relationship to the pop-up panel.

The pop-up menu implements the role="menu" pattern, handling keyboard interaction and focus management. Upon opening, the trigger will focus the first focusable menu item. Upon close, the menu will return focus to its trigger. Avoid creating a menu in which all items are disabled, instead hiding or disabling the menu trigger.

Angular Material does not support the menuitemcheckbox or menuitemradio roles.

Always provide an accessible label via aria-label or aria-labelledby for any menu triggers or menu items without descriptive text content.

MatMenu should not contain any interactive controls aside from MatMenuItem.