The menu component is what it sounds like, it's made for you to easily present a menu to the user. It uses three major directives, mat-menu, mat-menu-item, and lastly, MatMenuTriggerFor. There is only one mat-menu per menu and as many mat-menu-items as you need. The MatMenuTriggerFor is used to trigger the menu, you usually attach this one to a button.

Making the menu work can be divided into three steps:

1. Define a mat-menu control.
2. Add as many mat-menu-items as you need.
3. Add a trigger to a button by adding the MatMenuTriggerFor directive.

Before we do any of that, we need to import the MatMenuModule to be able to use the constructs previously mentioned, so let's do that:

import {MatMenuModule} from '@angular/material';

@NgModule({
  imports: [MatMenuModule]
})

Now we are ready to define our menu, like so:

<mat-menu>
</mat-menu>

Thereafter, we add as many items as we need:

<mat-menu>
  <button mat-menu-item >Item1</button>
  <button mat-menu-item >Item2</button>
</mat-menu>

Lastly, we add a trigger by adding a button that will trigger it and the matMenuTriggerFor directive, like so:

<button [matMenuTriggerFor]="menu">Trigger menu</button>
<mat-menu #menu>
  <button mat-menu-item >Item1</button>
  <button mat-menu-item >Item1</button>
</mat-menu>

Note how matMenuTriggerFor points to the menu view reference.

Your finished result should look something like this:

Not all menus are this simple of course. Sooner or later you will encounter a scenario where you need a menu to be nested. Material UI easily supports this. The overall approach to supporting this lies in defining a mat-menu definition for each menu you need and then connecting them. Then you need to define what action leads to what submenu being triggered. Sounds hard? It's really not. Let's begin with our top-level menu, our root menu. Let's give the menu items some meaningful names, like so:

<button [matMenuTriggerFor]="menu">Trigger menu</button>
<mat-menu #menu>
  <button mat-menu-item >File</button>
  <button mat-menu-item >Export</button>
</mat-menu>

At this point, we have two menu items and the last one, wxport, begs for some suboptions. Imagine we are dealing with tabular data in a program, it would make sense to support exporting that data to either CSV or PDF. Let's add a submenu for just that, like so:

<button [matMenuTriggerFor]="rootMenu">Trigger menu</button>
<mat-menu #rootMenu>
  <button mat-menu-item>File</button>
  <button mat-menu-item>Export</button>
</mat-menu>

<mat-menu #subMenu>
  <button mat-menu-item>CSV</button>
  <button mat-menu-item>PDF</button>
</mat-menu>

OK, so now we have two different menus, but we need to add the connection where a rootMenu item triggers the subMenu to show. Let's add that by again using the matMenutriggerFor directive, like so:

<button [matMenuTriggerFor]="rootMenu">Trigger menu</button>
<mat-menu #rootMenu>
  <button mat-menu-item >File</button>
  <button mat-menu-item [matMenuTriggerFor]="subMenu">Export</button>
</mat-menu>

<mat-menu #subMenu>
  <button mat-menu-item>CSV</button>
  <button mat-menu-item>PDF</button>
</mat-menu>

This should render a menu that looks like the following:

There are more things you can do with a menu than just rendering a few menu items and have them triggered by a button. Other things to consider and try out are making it more professional looking by adding an icon or catering to accessibility. Now that you know the basics of how to create a simple menu as well as nested ones, go and explore.