How to use menu in a page that is not the root page?

My root page is a Login page, look my app.component.ts:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { Login } from './../pages/login/login';

  template: `<ion-nav [root]="rootPage"></ion-nav>`
export class MyApp {
  rootPage = Login;

  constructor(platform: Platform) {
    platform.ready().then(() => {

My Login page send me to the MessageList page, in this page I’d like to use a menu. Look the MessageList html:

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

<ion-nav #mycontent></ion-nav>

  <ion-navbar hideBackButton="true">
    <button ion-button menuToggle>
      <ion-icon name='menu'></ion-icon>

<ion-content padding>

  <ion-refresher (ionRefresh)="doRefresh($event)">

  <ion-list inset>
    <ion-item *ngFor="let m of messages" (click)="messageSelected(m)">


But the button to toggle the menu is not appearing.

What’s the best way to use menu in a Ionic 2 project?

1 Like

You need two pages.

Sidemenu page

Message list page

I structured my app like this and I’m still missing my menuToggle-button on every page where a back-icon is showing.
I also tried to set enable-menu-with-back-views="true" which I stumbled upon googling this issue. But I guess this setting is deprecated?
Any idea how to solve this issue?

What’s your code for navigating from login to sidemenu/messagelist?

Nevermind, I found out that you have to add persistent="true" to <ion-menu> to achieve my desired behaviour.

If you want to know fror other reasons:
I change pages with this.navCtrl.push(PAGE) or this.nacCtrl.setRoot(PAGE).


Hi i have a same situation… menuToogle is not appearing.
i even tried to include persistent=“true” as <ion-menu [content]=“content” persistent=“true”>
it dint work.

Same Condition with menuToogle is not appearing.:pensive:

This is stupid, you have to change menuToggle to [menuToggle] and the menu toggle button will appear…