How to do two menu's... one on each side

Ionic Framework ionic-v3
1

Hey there,

Just starting out with Ionic 2 and I need a bit of help with menus… I’m using the menu template, which has a left side menu at the app level to navigate between pages…

That’s great, but now I’d like to add another menu, specific to one of those pages that lives on the right hand side.

I still want to keep the left menu to navigate between pages.

Here is what I’m trying to achieve (but perhaps with a second button rather than a swipe)… except in Ionic 2 rather than 1

Thanks…

2 
<!-- left menu -->
<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Main Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  
  <ion-content>
  <ion-list>
    <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
      {{p.title}}
    </button>
  </ion-list>
  </ion-content>
</ion-menu>


<!-- right menu -->
<ion-menu side="right" [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Secondary Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  
  <ion-content>
  <ion-list>
    <button menuClose="right" ion-item *ngFor="let p of pages" (click)="openPage(p)">
      {{p.title}}
    </button>
  </ion-list>
  </ion-content>
</ion-menu>
<ion-nav #content></ion-nav>
1 Like
3

How can I make two different toggle buttons for each menu?

4

You can add directive to the menuToggle, e.g.:

<ion-header>
 <ion-navbar>
  <button ion-button menuToggle="left" left>
   <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
   Ionic Blank
  </ion-title>
  <button ion-button menuToggle="right" right>
   <ion-icon name="menu"></ion-icon>
  </button>
 </ion-navbar>
</ion-header>
1 Like