We assume that we have installed everything that we need. Or if you haven’t pleased look on this previous article for how to start mobile app development with ionic? Let’s start the Two-side-menu ionic project.

Open the terminal or node.js command type this command to create the new project on ionic.

ionic start Two -side-menu sidemenu

cd Two -side-menu

ionic serve

will open the default browser and display this page.

Now open the app.html and replace the code as below.

<ion-menu [content]="content" side="left">
  <ion-header>
    <ion-toolbar>
      <ion-title>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>
<ion-menu [content]="content" side="right">
  <ion-header>
    <ion-toolbar>
      <ion-title>Notification</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>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Now Open the home.html and replace the code as below.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle="left">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title ion-center>ttmind Quiz</ion-title>
    <button ion-button menuToggle="right" right>
        <ion-icon name="notifications"></ion-icon>
      </button>
  </ion-navbar>
</ion-header>

Save the two files and see on the browser.

Click on Notification Icon to see the right side-menu.

If you have any Question. please comment below.