Angular Material Nested Menu

By Arvind Rai, September 24, 2022

On this page we will learn to create nested menus in our Angular Material application.
1. Menu is created using <mat-menu> element.
2. Menu items are created using mat-menu-item attribute.
3. To create a sub-menu, we need to set [matMenuTriggerFor] on the mat-menu-item that should trigger the sub-menu.
4. To support the Menu in our Angular Material application, we need to import MatMenuModule in our application module.

Technologies Used

Find the technologies being used in our example.
1. Angular 13.1.0
2. Angular Material 13.3.9
3. Node.js 12.20.0
4. NPM 8.2.0

Creating Sub-Menu

Here we will create a nested menu for plants. In our example, root menu will contain sub-menus and sub-menu will contain sub-sub-menu and then menu items.
Step-1 : Create root menu with some sub-menus.

<button mat-button [matMenuTriggerFor]="plants">Plants</button>
<mat-menu #plants="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="vegetables">Vegetables</button>  
  ------
</mat-menu>

We can see that sub-menu is created using mat-menu-item that triggers to sub-sub-menu using [matMenuTriggerFor].
Step-2 : Create sub-sub-menu.

<mat-menu #vegetables="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="leafy">Leafy Green</button>
  ------
</mat-menu>

Step-3 : Finally create items for sub-sub-menu.

<mat-menu #leafy="matMenu">
  <button mat-menu-item>Lettuce</button>
  ------
</mat-menu>

In this way, we can create nested menus as deep as we want.

Complete Example

menu-app.component.html

<button mat-button [matMenuTriggerFor]="plants">Plants</button>

<mat-menu #plants="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="vegetables">Vegetables</button>  
  <button mat-menu-item [matMenuTriggerFor]="fruits">Fruits</button>
</mat-menu>

<mat-menu #vegetables="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="leafy">Leafy Green</button>
  <button mat-menu-item [matMenuTriggerFor]="marrow">Marrow</button>
  <button mat-menu-item>Potato</button>
  <button mat-menu-item>Onion</button>
</mat-menu>

<mat-menu #fruits="matMenu">
  <button mat-menu-item>Apple</button>
  <button mat-menu-item>Banana</button>
  <button mat-menu-item>Mango</button>
  <button mat-menu-item>Orange</button>
  <button mat-menu-item>Papaya</button>
</mat-menu>

<mat-menu #leafy="matMenu">
  <button mat-menu-item>Lettuce</button>
  <button mat-menu-item>Spinach</button>
  <button mat-menu-item>Silverbeet</button>
</mat-menu>

<mat-menu #marrow="matMenu">
  <button mat-menu-item>Pumpkin</button>
  <button mat-menu-item>Cucumber</button>
  <button mat-menu-item>Zucchini</button>
</mat-menu>

menu-app.component.ts

import { Component } from '@angular/core';

@Component({
	selector: 'app-menu',
	templateUrl: './menu-app.component.html'
})
export class MenuAppComponent {
}

app.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
           <app-menu></app-menu>
          `
})
export class AppComponent {
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';
import { MenuAppComponent } from './menu-app.component';


@NgModule({
      imports: [
            BrowserModule,
            BrowserAnimationsModule,
            MatMenuModule,
	    MatButtonModule
      ],
      declarations: [
            AppComponent,
            MenuAppComponent
      ],
      providers: [
      ],
      bootstrap: [
            AppComponent
      ]
})
export class AppModule { }

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.