How to Use Angular Material Mat Menu (Step-by-Step Guide)

Angular Material provides a robust and customizable MatMenu component that enhances user experience with intuitive dropdown menus. Whether you’re building a simple navigation menu or a dynamic nested menu, Angular Material’s MatMenu makes it easy to implement. In this guide, we'll explore how to use MatMenu effectively in Angular applications.

Installing Angular Material

If you haven’t installed Angular Material in your project yet, you can do so using the following command:

ng add @angular/material

Follow the setup instructions to configure Material theming and animations.

Importing MatMenuModule

To use MatMenu, import MatMenuModule in your module:

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';

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

Basic Usage of Mat Menu