Home  >  Angular  >  Angular Material

Angular Material Menu Position

By Arvind Rai, September 23, 2022
On this page we will learn to customize Menu position in our Angular Material application. Angular Material Menu is created using <mat-menu> element. The <mat-menu> is a floating panel containing list of options.
By default, the Menu displays below (y-axis), after (x-axis), without overlapping its trigger. The Menu position can be changed by using the following properties of <mat-menu> element.
xPosition : The position changes on x-axis. The values are before and after.
yPosition : The position changes on y-axis. The values are above and below.



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

Using xPosition and yPosition

Case-1 : xPosition="after" and yPosition="below"
<button mat-button [matMenuTriggerFor]="menu1">Menu 1</button>
<mat-menu #menu1="matMenu" xPosition="after" yPosition="below">
   ------
</mat-menu> 
Click on Menu1.
Angular Material Menu Position
Case-2 : xPosition="after" and yPosition="above"
<button mat-button [matMenuTriggerFor]="menu2">Menu 2</button>
<mat-menu #menu2="matMenu" xPosition="after" yPosition="above">
   ------
</mat-menu> 
Click on Menu2.
Angular Material Menu Position
Case-3 : xPosition="before" and yPosition="below"
<button mat-button [matMenuTriggerFor]="menu3">Menu 3</button>
<mat-menu #menu3="matMenu" xPosition="before" yPosition="below">
   ------
</mat-menu> 
Click on Menu3.
Angular Material Menu Position
Case-4 : xPosition="before" and yPosition="above"
<button mat-button [matMenuTriggerFor]="menu4">Menu 4</button>
<mat-menu #menu4="matMenu" xPosition="before" yPosition="above" overlapTrigger="true">
   ------
</mat-menu> 
Click on Menu4.
Angular Material Menu Position

Using overlapTrigger

By default, the Menu will display without overlapping its trigger. We can force the Menu to overlap the trigger by setting overlapTrigger="true". The overlapTrigger attribute accepts boolean value.
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu4="matMenu" xPosition="before" yPosition="above" overlapTrigger="true">
   ------
</mat-menu> 

Complete Example

menu-app.component.html
<div class="menu">
  <button mat-button [matMenuTriggerFor]="menu1">Menu 1</button>
  <mat-menu #menu1="matMenu" xPosition="after" yPosition="below">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>
    
  <button mat-button [matMenuTriggerFor]="menu2">Menu 2</button>
  <mat-menu #menu2="matMenu" xPosition="after" yPosition="above">
    <button mat-menu-item>Item 3</button>
    <button mat-menu-item>Item 4</button>
  </mat-menu>
   
  <button mat-button [matMenuTriggerFor]="menu3">Menu 3</button>
  <mat-menu #menu3="matMenu" xPosition="before" yPosition="below">
    <button mat-menu-item>Item 5</button>
    <button mat-menu-item>Item 6</button>
  </mat-menu>
   
  <button mat-button [matMenuTriggerFor]="menu4">Menu 4</button>
  <mat-menu #menu4="matMenu" xPosition="before" yPosition="above" overlapTrigger="true">
    <button mat-menu-item>Item 7</button>
    <button mat-menu-item>Item 8</button>
  </mat-menu>  
</div> 
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

Reference

Angular Material Menu

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI










©2022 concretepage.com | Privacy Policy | Contact Us