Angular Material Menu with RouterLink

By Arvind Rai, September 30, 2022

On this page we learn to use RouterLink as menu item in our Angular Material routing application.
1. The RouterLink is used with an element in a template that makes the element a link that initiates navigation to a route.
2. Navigation opens routed components in <router-outlet> location on the page.
3. Angular Material Menu is created using <mat-menu> element.
4. Menu items are created using HTML element or icon with mat-menu-item attribute.

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 Menu Items with RouterLink

Here we will create menu items using <a> tag with mat-menu-item and routerLink attributes.

<mat-menu #appMenu="matMenu">
  <ng-template matMenuContent>
    <a mat-menu-item routerLink="/home" routerLinkActive="active-link">Home</a>
    <a mat-menu-item routerLink="/add-book" routerLinkActive="active-link">Add Book</a>
    <a mat-menu-item routerLink="/manage-book" routerLinkActive="active-link">Manage Book</a>   
  </ng-template>
</mat-menu>
<nav>
  <button mat-raised-button [matMenuTriggerFor]="appMenu">Book</button> 
</nav>

Find the print screen of the output.

In this way, we can add more than one menus.

------
<nav>
  <button mat-raised-button [matMenuTriggerFor]="appMenu1"> Book </button> 
  <button mat-raised-button [matMenuTriggerFor]="appMenu2"> Java Tech </button>
  <button mat-raised-button [matMenuTriggerFor]="appMenu3"> Framework </button>
  ------
</nav>

Creating Menu Items with Icons and RouterLink

Here we are using menu items as icons. Menu items will be a RouterLink and display items as icons in menu panel.

<mat-menu #appMenu="matMenu">
  <ng-template matMenuContent>
    <a mat-menu-item routerLink="/home" routerLinkActive="active-link">
      <mat-icon>home</mat-icon>
      <span>Home</span>
    </a>
    <a mat-menu-item routerLink="/add-book" routerLinkActive="active-link">
      <mat-icon>book</mat-icon>
      <span>Add Book</span>
    </a>
    <a mat-menu-item routerLink="/manage-book" routerLinkActive="active-link">
      <mat-icon>book</mat-icon>
      <span>Manage Book</span>
    </a>   
  </ng-template>
</mat-menu>
<nav>
  <button mat-icon-button [matMenuTriggerFor]="appMenu"> 
    <mat-icon>more_vert</mat-icon>
  </button> 
</nav>

Find the print screen of the output.

Complete Example

app.component.html

<mat-menu #appMenu="matMenu">
  <ng-template matMenuContent>
    <a mat-menu-item routerLink="/home" routerLinkActive="active-link">
      <mat-icon>home</mat-icon>
      <span>Home</span>
    </a>
    <a mat-menu-item routerLink="/add-book" routerLinkActive="active-link">
      <mat-icon>book</mat-icon>
      <span>Add Book</span>
    </a>
    <a mat-menu-item routerLink="/manage-book" routerLinkActive="active-link">
      <mat-icon>book</mat-icon>
      <span>Manage Book</span>
    </a>   
  </ng-template>
</mat-menu>
<nav>
  <button mat-icon-button [matMenuTriggerFor]="appMenu"> 
    <mat-icon>more_vert</mat-icon>
  </button> 
</nav> 
<div>	
  <router-outlet></router-outlet>	
</div>

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
}

app.component.css

.active-link {
    color: #F20B22;
}

app-routing.module.ts

import { NgModule }      from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent }  from './home/home.component';
import { AddBookComponent }  from './add-book/add-book.component';
import { ManageBookComponent }  from './manage-book/manage-book.component';

const routes: Routes = [
        { path: 'home', component: HomeComponent },
	{ path: 'add-book', component: AddBookComponent },
	{ path: 'manage-book', component: ManageBookComponent },
        ------
];
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule{ }

app.module.ts

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatMenuModule,
    MatIconModule,
    MatButtonModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent
    ------
  ],
  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