Unable to access multiple menu

I have created 2 different menus with different menu id. But it is not working.

We can have multiple menus in the app, lets say one on the left and another one on the right side.

  1. The default menu is in the app.component.html page.i.e the left menu
  2. Add a button in the header of the required page to open the modal after clicking the button
<ion-header>
  <ion-toolbar>
    <ion-title>
    </ion-title>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-buttons slot="end" (click)="openRightMenu()">
      <ion-button>
        <ion-icon slot="icon-only" name="options-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
  1. Next we can define the right menu on the page after its header and content, like this:-
<ion-menu side="end" menuId="rightMenu" contentId="rightMenu">
  <ion-header>
    <ion-toolbar>
      <ion-title></ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
        <ion-item></ion-item>
        <ion-item></ion-item>
        <ion-item></ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-router-outlet id="rightMenu"></ion-router-outlet>
  1. Then we can open the menu on clicking the button like this.
openRightMenu() {
    this.menuCtrl.open('rightMenu');
}

This menu will only be open on the page where it is added and here the rightMenu is the menuId which is used to enable /disable the menu.