Angular Material Menu Component

The menu component of Angular Material is used to show a Menu with different menu items to navigate from one page to another. Well, it is a simple floating menu that contains different menu options with the appropriate link of the other pages of the application, we can use a menu inside a toolbar, and drawer and footer as well depending on project requirements.

The main module of the Angular Material for implementing the menu is called MatMenuModule and to show the menu element into the HTML template, we can use the mat-menu selector which is used to show the floating menu along with the menu items.

In this article, we are going to implement a menu with different options which are described below in brief.

Basic Menu

In the basic menu, we are just going to render different menu options, let's see the step-by-step procedure.

Step 1

The first step is to import the material menu module from the angular material package into our root module file along with other related modules as described below.

Import the different classes for the menu component and other components as given below.

 import { MatCardModule, MatButtonModule, MatMenuModule, MatIconModule } from '@angular/material';
 
 // Now, we need to add all these classes to the import array.
 imports: [
 CommonModule,
 MatCardModule,
 MatButtonModule,
 MatMenuModule,
 MatIconModule,
 ]

In the above example, we have imported four different elements of Angular material for using the menu, button, card, and icon modules and combinedly we will create our layout effectively.

Here, in this example, we are going to trigger the menu based on button click that is why we have imported the button module and also going to use icons with it.

Step 2

After importing all the required modules, the next step is to create and use the material menu element using the selector mat-menu and for that open the app.component.html file and paste the following lines of code snippets.

<mat-card>
<div class="alert alert-info">
 <strong>Angular Material Menu Component</strong>
</div>
</mat-card>
<mat-card>
<h2>Basic Menu</h2>
<button mat-button [matMenuTriggerFor]="basicmenu">Menu</button>
<mat-menu #basicmenu="matMenu">
 <button mat-menu-item>Angular</button>
 <button mat-menu-item>React</button>
 <button mat-menu-item>Vue</button>
 <button mat-menu-item>Meteor</button>
 <button mat-menu-item>Vanilla</button>
</mat-menu>
</mat-card>

In this example, we have used different material components like

• Mat-card

  It is used for showing some static data and it is the wrapper of the material menu element

• Mat-button

  A material button is used to trigger a click event when we want to open the menu manually or programmatically

• matMenuTriggerFor

  It is a directive, which is used to trigger the menu options when the button click event will be triggered because the mat-menu cannot open menu items by itself

• #basicmenu

  Which identifies that the name with the basic menu will act as a menu component when button click event will be triggered

• Mat-menu-item

  This is used to specify the items on the menu once the main menu will be accessed when either by the click or the hover event triggers

Step 3

So far, we have implemented all necessary configurations such as importing essential modules and the template menu configuration, now it's time to run the above example and see the output.

Output

And when we click on the menu button, menu options will appear as given below.

This is how we have implemented a simple menu material component; let’s try the menu with material icons in our next example.

Menu with Icons

In our previous example, we have implemented a simple menu, but in the same way, we can also use different material icons with menu and menu items for representing menu items in a unique way such as home menu items with the home icons. For that just follow the simple steps described below.

Step 1

For this example, I am going to use the different material icons and for that, we need to add a style sheet that allows us to access the icon themes and related features,  we can include it as given below.

 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Angularmaterialcomponents</title>
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 <!-- To use material icons -->
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
 <app-root></app-root>
 </body>
 </html>

In this file, we have added a style sheet file to use different material icons throughout the application.

Step 2

After the icon related themes and font configuration, next step Is to implement and use the directive called mat-icon, for that, open the app.component.html file and paste the following source code.

 <mat-card>
 <div class="alert alert-info">
 <strong>Angular Material Menu Component</strong>
 </div>
 </mat-card>
 <mat-card>
 <h2>Basic Menu With Icons</h2>
 <button mat-button [matMenuTriggerFor]="menu">
 <mat-icon>dashboard</mat-icon>
 Menu
 </button>
 <mat-menu #menu="matMenu">
 <button mat-menu-item>
 <mat-icon>favorite</mat-icon>Angular
 </button>
 <button mat-menu-item>
 <mat-icon>favorite_border</mat-icon>React
 </button>
 <button mat-menu-item>
 <mat-icon>launch</mat-icon>Vue
 </button>
 <button mat-menu-item>
 <mat-icon>input</mat-icon>Meteor
 </button>
 <button mat-menu-item>
 <mat-icon>lock</mat-icon>Vanilla
 </button>
 </mat-menu>
 </mat-card>

In this example, you can observe that the menu element is the same and it is the same as the above example, but a different part is that we have used material icons with the menu items so that each menu item has multiple icons so once the menu item gets rendered, each item contains icon elements.

<mat-con>

This directive is used to include and use the material icons along with the different components such as the menu. We need to provide an appropriate icon name with it as per the need such as the back menu may have a back icon, the home menu item may have a home icon and so on.

Step 3

Now let’s run the above example and you can see output like this.

In this image, you can see that with the menu I have used one material icon, now press the button, and will get output like this.

So when we click on the menu, the menu items will be appeared and can see that there are different icons that will be used with each and every menu item.

Nested Menu

So far, we have developed a simple menu with menu items, but what if we have menu items in different categories. The nested menu will be helpful in such cases where we have a large number of pages in a single application, and we allow the user to use all the pages of the application from a single page. For that, we have flexibility with a material menu that we can also create a nested menu with the child menu items, for that just follow the simple step and we will have a nested material menu.

Step 1

Open the app.component.html file and paste the following lines of source code.

 <mat-card>
 <div class="alert alert-info">
 <strong>Angular Material Menu Component</strong>
 </div>
 </mat-card>
 <mat-card>
 <h2>
 Nested Menu
 </h2>
 <button mat-button [matMenuTriggerFor]="rootMenu">
 <mat-icon>dashboard</mat-icon>
 Menu
 </button>
 <mat-menu #rootMenu="matMenu">
 <button mat-menu-item [matMenuTriggerFor]="subMenu1">Angular</button>
 <button mat-menu-item [matMenuTriggerFor]="subMenu2">React</button>
 </mat-menu>
 
 <mat-menu #subMenu1="matMenu">
 <button mat-menu-item>Angular 1.x</button>
 <button mat-menu-item>Angular 2</button>
 <button mat-menu-item>Angular 4</button>
 <button mat-menu-item>Angular 5</button>
 <button mat-menu-item>Angular 6</button>
 </mat-menu>
 
 <mat-menu #subMenu2="matMenu">
 <button mat-menu-item>React 16.0</button>
 <button mat-menu-item>React 16.1</button>
 <button mat-menu-item>React 16.2</button>
 <button mat-menu-item>React 16.3</button>
 <button mat-menu-item>React 16.4</button>
 <button mat-menu-item>React 16.5</button>
 </mat-menu>
 
 </mat-card>

Let me explain a bit about the above example. In this example, mainly we have different three menus named :

• rootMenu

• subMenu1

• subMenu2

Our first menu will be triggered when the button is clicked, and you can see the code like this.

 
 <button mat-button [matMenuTriggerFor]="rootMenu">
 <mat-icon>dashboard</mat-icon>
 Menu
 </button>

And when the user clicks on the button, a child menu will be appeared named root menu, which contains two different menu categories like

• Angular

• React

 
 <mat-menu #rootMenu="matMenu">
 <button mat-menu-item [matMenuTriggerFor]="subMenu1">Angular</button>
 <button mat-menu-item [matMenuTriggerFor]="subMenu2">React</button>
 </mat-menu>

When we click one-two of the value, it will find the sub-child module with the relevant name from the list of child menus and trigger the menu item to the end-user. So when the user selects any of the child items of the menu from Angular or React, at that time their respective menus will appear and we have implemented the code like below.

 
 <mat-menu #subMenu1="matMenu">
 <button mat-menu-item>Angular 1.x</button>
 <button mat-menu-item>Angular 2</button>
 <button mat-menu-item>Angular 4</button>
 <button mat-menu-item>Angular 5</button>
 <button mat-menu-item>Angular 6</button>
 </mat-menu>
 
 <mat-menu #subMenu2="matMenu">
 <button mat-menu-item>React 16.0</button>
 <button mat-menu-item>React 16.1</button>
 <button mat-menu-item>React 16.2</button>
 <button mat-menu-item>React 16.3</button>
 <button mat-menu-item>React 16.4</button>
 <button mat-menu-item>React 16.5</button>
 </mat-menu>

Step 2

We have developed our nested menu with nested menu items, now the next move is to run the above example and see how it works. When you run the above example, you can see the first output like this.

When we click on the menu button, now we will have two different child menu items named Angular and React, and it looks like this.

And when the user hovers over the child menu items, they can see the list of submenu items like this.

As you can see in the above image that we have now three-level menus with different child options, to use the material menu for your project, you can implement routing with these child menu items.

Summary

In this part of the angular material tutorial series, we have learned three different examples of Angular Material Menu Component.

• Simple menu

• Simple menu with the Material icons

• Nested Menu

This is the basic article that allows us to learn how to integrate the material menu components with our angular application in a step by step manner along with the additional material features such as material icons and buttons, thus we can customize its properties to be used in our development or the business projects, Thanks for reading.

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

GET TEST NOW