A seamless guide on Angular Material Menu Component

Table of Content

Introduction

The Angular Material Menu component is used to display a menu with several menu items which can be used to navigate from one page to another. Well, it's a simple floating menu that contains various menu selections with appropriate links to the application's various pages. We can also use menus inside toolbars, drawers, and footers depending on the project requirements.

In this article, we will construct a menu with many options, that will be quickly explained below.

What is the material menu component?

The Material menu is a floating panel containing a list of options.

In Angular, we may apply the MatMenuModule angular material menu module to build menu items.

The element does not render anything on its own.

Table of contents

A material menu module can be included in our components ts file, app.module.ts file, and any other common material module used throughout the application.

import { MatMenuModule } from "@angular/material/menu";

Use mat-menu selector, which is nothing more than a floating panel containing a list of menu selections, after importing MatMenuModule in our component code.

 Menu ItemMenu Item
 

As a Menu Item, I'm using the button element.

And do not forget to add mat-menu-item to the menu options.

In the mat-menu variable, add a template reference variable which will be used to refer to our menu panel.

In this scenario, I've included the variable menu.

The above mat-menu element has no render on the user interface.

The mat-menu is a directive that is used to trigger the menu options when the button click event is triggered because it cannot open menu items by itself.

The menu should be tied to a trigger element that uses the matMenuTriggerFor directive to open and shut the menu.

<button mat-button="">Simple Menu</button>

<mat-menu menu="matMenu"><button mat-menu-item="">Menu Item 1</button><button mat-menu-item="">Menu Item 2</button>
</mat-menu>

Changing mat menu position

The material menu will be displayed by default above the menu trigger element.

If you want the menu to display before or after the menu trigger element, set the xPosition value to "before" or "after."

Set the xPosition value to "before" or "after" if you just want the menu to appear before or after the menu trigger element.

The xPosition attribute sets the menu all along the horizontal axis.

The yPosition attribute is used to change the menu's vertical position.

Set the yPosition property to "above" to display the menu just above the menu trigger element.

The values "above" and "below" are accepted by yPosition.

<button mat-button="">Before</button>
<mat-menu beforemenu="matMenu" xposition="before"><button mat-menu-item="">Item 1</button><button mat-menu-item="">Item 2</button>
</mat-menu><button mat-button="">After</button>
<mat-menu aftermenu="matMenu" xposition="after"><button mat-menu-item="">Item 1</button><button mat-menu-item="">Item 2</button>
</mat-menu><button mat-button="">Above</button>
<mat-menu abovemenu="matMenu" yposition="above"><button mat-menu-item="">Item 1</button><button mat-menu-item="">Item 2</button>
</mat-menu><button mat-button="">Below</button>
<mat-menu belowmenu="matMenu" yposition="below"><button mat-menu-item="">Item 1</button><button mat-menu-item="">Item 2</button>
</mat-menu>

How to create Nested menus?

So far, we've created a simple menu with menu items, but what if we have several categories of menu items?

The nested menu will be useful if we have a big number of pages in a single application so we want the user to be able to access all of the application's pages from a single page.

With a material menu, we have the right to customize a nested menu with the child menu items; just follow the basic steps and we will have a nested material menu.

It is quite simple to create nested menus or sub-menus.

Using the matmenutriggerFor attribute, we have to add another menu to the mat-menu-item.

<button mat-button="">Animal index</button>

<mat-menu animals="matMenu"><button mat-menu-item="">Vertebrates</button><button mat-menu-item="">Invertebrates</button>
</mat-menu>
<mat-menu vertebrates="matMenu"><button mat-menu-item="">Fishes</button><button mat-menu-item="">Amphibians</button><button mat-menu-item="">Reptiles</button><button mat-menu-item="">Birds</button><button mat-menu-item="">Mammals</button>
</mat-menu>
<mat-menu invertebrates="matMenu"><button mat-menu-item="">Insects</button><button mat-menu-item="">Molluscs</button><button mat-menu-item="">Crustaceans</button><button mat-menu-item="">Corals</button><button mat-menu-item="">Arachnids</button><button mat-menu-item="">Velvet worms</button><button mat-menu-item="">Horseshoe crabs</button>
</mat-menu>
<mat-menu fish="matMenu"><button mat-menu-item="">Baikal oilfish</button><button mat-menu-item="">Bala shark</button><button mat-menu-item="">Ballan wrasse</button><button mat-menu-item="">Bamboo shark</button><button mat-menu-item="">Banded killifish</button>
</mat-menu>
<mat-menu amphibians="matMenu"><button mat-menu-item="">Sonoran desert toad</button><button mat-menu-item="">Western toad</button><button mat-menu-item="">Arroyo toad</button><button mat-menu-item="">Yosemite toad</button>
</mat-menu>
<mat-menu reptiles="matMenu"><button mat-menu-item="">Banded Day Gecko</button><button mat-menu-item="">Banded Gila Monster</button><button mat-menu-item="">Black Tree Monitor</button><button mat-menu-item="">Blue Spiny Lizard</button><button disabled="disabled" mat-menu-item="">Velociraptor</button>
</mat-menu>    

How to disable mat-menu-item?

The disabled property can be used to disable the mat menu item.

I've added a property called IsDisabled to the MatMenuListItem object described above. It can also be used to turn off the menu link.

<button mat-menu-item="" ngfor="let item of menuListItems">
    <mat-icon>{{ item.menuIcon }}</mat-icon>
    <span> {{ item.menuLinkText }}</span></button>

In this example, I'll use one menu with an icon;

We developed a simple menu in our previous example, but we can also use different material icons with menu and menu items in this example. Simply follow the instructions outlined below to accomplish this.

I'm going to use various material icons in this example, so we'll need a style sheet like this.

<!doctype html=""><html lang="en"><head>
  <meta charset="utf-8"><title></title><base href="/" />
  <meta name="viewport" content="width=device-width, initial-scale=1"><link href="favicon.ico" rel="icon" type="image/x-icon" /><link href="https://fonts.gstatic.com" rel="preconnect" /><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /></head><body class="mat-typography">
  <app-root></app-root></body></html>	
</!doctype>

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

<!doctype html="">
<mat-toolbar color="primary"> 
   <mat-toolbar-row><button mat-icon-button="">
      <mat-icon>menu</mat-icon></button>
    <mat-menu menu="matMenu"><button mat-menu-item="">
      <mat-icon>home</mat-icon>
      <span>Home</span></button><button mat-menu-item="">
      <mat-icon>storefront</mat-icon>
      <span>Shop By Categories</span></button><button mat-menu-item="">
      <mat-icon>star_border</mat-icon>
      <span>Orders</span></button><button mat-menu-item="">
      <mat-icon>contact_support</mat-icon>
      <span>Contact Us</span></button><button mat-menu-item="">
      <mat-icon>quiz</mat-icon>
      <span>FAQ</span></button><button mat-menu-item="">
      <mat-icon>exit_to_app</mat-icon>
      <span>Logout</span></button>
</mat-menu>
    <span>Clothes Shop</span><button mat-button="" routerlink="/logincrud">Login</button><button mat-button="" routerlink="/registration">
Registration</button><button mat-button="" routerlink="/menu">
Details of Suppliers</button>
    
      <mat-icon>more_vert</mat-icon>
    </mat-toolbar-row> 
</mat-toolbar>
<section class="hero is-info is-fullheight is-bold"><div class="hero-body"><div class="container"></div></div></section>

</!doctype>

Conclusion

In this article, we have learned how to integrate a material menu component with our Angular application with step by step procedure. We have also gone through changing the position of mat menu, how to enable and disable it practically.