title: Ionic 2 - Side menu with navigation between pages (back button)
body: <p>I'm new to hybrid apps development. First I want to know if it's possible to have navigation between pages using a side menu in Ionic 2. I was able to implement navigation between pages as shown in <a href="http://gonehybrid.com/build-your-first-mobile-app-with-ionic-2-angular-2/" rel="noreferrer">this tutorial</a> and a menu as shown in the <a href="http://ionicframework.com/docs/v2/components/#menus" rel="noreferrer">ionicdocs site</a>. But when I click on a menu item, the menu sets the page as "rootPage", so I'm redirected to that page, but if I want to go back to home page I have to do that through the menu, I'd like to just press a back button.</p>
  
  <p>Thanks in advance, this is my app.ts file:</p>
  
  <pre><code>import {App, IonicApp, Platform, MenuController} from 'ionic-angular';
  import {StatusBar} from 'ionic-native';
  import {HomePage} from './pages/home/home';
  import {CategoriesPage} from './pages/categories/categories';
  
  @App({
    template: `
  &lt;ion-menu [content]="content"&gt;
  &lt;ion-toolbar&gt;
      &lt;ion-title&gt;Menu&lt;/ion-title&gt;
  &lt;/ion-toolbar&gt;
  
  &lt;ion-content&gt;
      &lt;ion-list&gt;
          &lt;button ion-item (click)="openPage(categoriesPage)"&gt;
              Categorías
          &lt;/button&gt;
          &lt;button ion-item&gt;
              Mis Compras
          &lt;/button&gt;
          &lt;button ion-item&gt;
              Lista de Deseos
          &lt;/button&gt;
          &lt;button ion-item&gt;
              Cerrar Sesión
          &lt;/button&gt;
      &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  &lt;/ion-menu&gt;
  
  &lt;ion-nav id="nav" #content [root]="rootPage"&gt;&lt;/ion-nav&gt;`,
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/
  })
  export class MyApp {
    public rootPage;
    public app;
    public menu;
    public categoriesPage;
  
    constructor(app: IonicApp, platform: Platform, menu: MenuController) {
  
        this.app = app;
        this.menu = menu;
        this.categoriesPage = CategoriesPage;
  
      platform.ready().then(() =&gt; {
        StatusBar.styleDefault();
      });
  
      this.rootPage = HomePage;
    }
  
    openPage(page){
      this.rootPage = page;
      this.menu.close();
    }
  }
  </code></pre>
  
  <p><strong>EDIT</strong>:
  Modified app.ts to use NavController, but now it's not even loading home page</p>
  
  <pre><code>import {App, IonicApp, Platform, NavController, MenuController} from 'ionic-angular';
  import {StatusBar} from 'ionic-native';
  import {HomePage} from './pages/home/home';
  import {CategoriesPage} from './pages/categories/categories';
  
  @App({
  template: `
  &lt;ion-menu [content]="content"&gt;
      &lt;ion-toolbar&gt;
          &lt;ion-title&gt;Menu&lt;/ion-title&gt;
      &lt;/ion-toolbar&gt;
  
      &lt;ion-content&gt;
          &lt;ion-list&gt;
              &lt;button ion-item (click)="openPage(categoriesPage)"&gt;
                  Categorías
              &lt;/button&gt;
              &lt;button ion-item&gt;
                  Mis Compras
              &lt;/button&gt;
              &lt;button ion-item&gt;
                  Lista de Deseos
              &lt;/button&gt;
              &lt;button ion-item&gt;
                  Cerrar Sesión
              &lt;/button&gt;
          &lt;/ion-list&gt;
      &lt;/ion-content&gt;
  &lt;/ion-menu&gt;
  
  &lt;ion-nav id="nav" #content [root]="rootPage"&gt;&lt;/ion-nav&gt;`,
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/
  })
  export class MyApp {
    public rootPage;
  
    public app;
    public nav;
    public categoriesPage;
  
    constructor(app: IonicApp, platform: Platform, nav: NavController) {
  
        this.app = app;
        this.nav = nav;
        this.categoriesPage = CategoriesPage;
  
        platform.ready().then(() =&gt; {
            StatusBar.styleDefault();
      });
  
      this.rootPage = HomePage;
  
    }
  
    openPage(page){
      this.nav.push(page, {"test": ""});
    }
  }
  </code></pre>
  
  <p>categories.html:</p>
  
  <pre><code>&lt;ion-navbar *navbar&gt;  
    &lt;ion-title&gt;
        Categories
    &lt;/ion-title&gt;
  &lt;/ion-navbar&gt;
  &lt;ion-content class="categories"&gt;  
    &lt;ion-list inset&gt;
        &lt;ion-item&gt;
            &lt;ion-label&gt;Categories&lt;/ion-label&gt;
        &lt;/ion-item&gt;
    &lt;/ion-list&gt;
  &lt;/ion-content&gt; 
  </code></pre>