ionic: Menu

app.html

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

<ion-header>
<ion-toolbar>
<ion-title>menu_name</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item (click)="loadPage(page1)">
<ion-icon name="menu_item_1" item-left></ion-icon>
item_1
</button>
<button ion-item (click)="loadPage(page2)">
<ion-icon name="menu_item_2" item-left></ion-icon>
item_2
</button>
</ion-list>
</ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #id_name></ion-nav>

app.component.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = RootPage;
  page1 = Page1;
  page2 = Page2;
  @ViewChild('nav') nav: NavController; // Because the menu is inside the ion-nav

  ....

  onLoad(page: any) {
    this.nav.setRoot(page);
    this.menuController.close();
  }
}

your_page.html

<ion-header>

  <ion-navbar>

  <ion-buttons start>

  <button ion-button menuToggle>

  <ion-icon name="menu"></ion-icon>

  </button>

  </ion-buttons>

    <ion-title>your_page</ion-title>

  </ion-navbar>

</ion-header>

...