How to add SideBar Menu to my existing ionic project

I am already working in an Ionic2 project, but I am facing difficulties in adding a sidebar menu.

Currently my code looks like the following, when I click on the menu icon, the menu seems to show behind the navbar and the whole view itself.

I believe the way I am following is a wrong way to implement the sidebar.


      <ion-navbar mainPageNavBarColor>
           <button menuToggle start>
          <ion-icon name="menu"></ion-icon>
        <ion-menu [content]="mycontent">
            <button menuClose ion-item detail-none>Close Menu</button>
            <button menuClose ion-item detail-none>Close Menu 2</button>
            <button menuClose ion-item detail-none>Close Menu 3</button>
      <ion-nav #mycontent [root]="rootPage"></ion-nav>

Can you please tell me what’s wrong?

1 Like

You can see the docs
I think you should not enclose the ion-menu inside ion-header and ion-navbar.

In app.html

<ion-menu [content]="content">


      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">


<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

and in app.ts

import {Component, ViewChild} from '@angular/core';
import {App, ionicBootstrap, Platform, Nav} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {ListPage} from './pages/list/list';

  templateUrl: 'build/app.html'
class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = TabsPage;
  pages: Array<{title: string, component: any}>

  constructor(private platform: Platform) {

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'List', component: ListPage }


  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario



and rest of your pages of existing app.
eg. home.html

<ion-navbar *navbar>
    <button menuToggle>
    <ion-icon name="menu"></ion-icon>
    <ion-title>Getting Started</ion-title>

<ion-content padding class="page1">
    <h2>Welcome to Ionic!</h2>

@nabinkumarn I can to make menu in Home page for example, its possble ?

No I don’t think it’s possible.

To add a menu to an app, the element should be added as a sibling to the ion-nav it will belongs to. A local variable should be added to the ion-nav and passed to the ion-menus content property.

By default, the only place that has <ion-nav> is app.html. <ion-nav> is essentially your NavController. I am not sure if you can have multiple <ion-nav> in your project, but I believe it will mess with how your NavController work.

ionic-angular/umd"’ has no exported member 'ionicBootstrap

In this scenario, How to navigate to previous page using hardware back button?
because we dont use nav.push method.

How is it possible?