Hi, I’m starting to play with ionic 2 and I’m facing a little problem with menus. Is it possible to create dynamic right menu? I want to have different right menu content on each page. It could be simple text, form, grid or something else.
For example on search page I want to have filters in right menu.
You could just put the menu code inside the html template in the component to personalize, then use the nav component imported in that element and a (click) event to push the components to the nav component or set root element, the key here is that you put the menu inside the new template and in your header put a new button with menuToggle connected to the right menu to open it, only in that component.
I did as you wrote but it does not work. Please look at my example:
app.js
import {App, IonicApp, Platform} from 'ionic/ionic';
import {FirstPage} from './first/first';
import {SecondPage} from './second/second';
@App({
templateUrl: 'app/app.html'
})
class MyApp {
constructor(app: IonicApp, platform: Platform) {
this.app = app;
this.platform = platform;
this.initializeApp();
this.pages = [
{ title: "First Page", component: FirstPage },
{ title: "Second Page", component: SecondPage }
];
this.rootPage = FirstPage;
}
initializeApp() {
this.platform.ready().then(() => {
console.log('Platform ready');
});
}
openPage(page) {
let nav = this.app.getComponent('nav');
nav.setRoot(page.component);
}
}
app.html
<ion-menu [content]="content" side="left" id="testLeftMenu">
<ion-toolbar>
<ion-title>Left menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<ion-list-header>Pages</ion-list-header>
<button menuClose ion-item *ngFor="#p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
first.js
import {IonicApp, Page, NavController, NavParams} from 'ionic/ionic';
@Page({
templateUrl: 'app/first/first.html'
})
export class FirstPage {
constructor(app: IonicApp, nav: NavController, navParams: NavParams) {
this.nav = nav;
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get('item');
}
}
first.html
<ion-navbar *navbar>
<button menuToggle="testLeftMenu">
<icon menu></icon>
</button>
<ion-title>First Page</ion-title>
<button menuToggle="testRightMenu">
<icon menu></icon>
</button>
</ion-navbar>
<ion-menu [content]="content" side="right" id="testRightMenu">
<ion-toolbar>
<ion-title>First right menu</ion-title>
</ion-toolbar>
<ion-content>
First right menu body
</ion-content>
</ion-menu>
<ion-content>
<ion-card>
<ion-card-content>
First page content
</ion-card-content>
</ion-card>
</ion-content>
second.js
import {IonicApp, Page, NavController, NavParams} from 'ionic/ionic';
@Page({
templateUrl: 'app/second/second.html'
})
export class SecondPage {
constructor(app: IonicApp, nav: NavController, navParams: NavParams) {
this.nav = nav;
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get('item');
}
}
second.html
<ion-navbar *navbar>
<button menuToggle="testLeftMenu">
<icon menu></icon>
</button>
<ion-title>Second Page</ion-title>
<button menuToggle="testRightMenu">
<icon menu></icon>
</button>
</ion-navbar>
<ion-menu [content]="content" side="right" id="testRightMenu">
<ion-toolbar>
<ion-title>Second right menu</ion-title>
</ion-toolbar>
<ion-content>
Second right menu body
</ion-content>
</ion-menu>
<ion-content>
<ion-card>
<ion-card-content>
Second page content
</ion-card-content>
</ion-card>
</ion-content>I solved one problem but appeared another. When I change page using left menu toggle button for right menu stops working. Now my page template looks like this:
<ion-menu [content]="pagecontent" side="right" id="testRightMenu">
<ion-toolbar>
<ion-title>First right menu</ion-title>
</ion-toolbar>
<ion-content>
First right menu body
</ion-content>
</ion-menu>
<ion-content #pagecontent>
<ion-navbar *navbar>
<button menuToggle="testLeftMenu">
<icon menu></icon>
</button>
<ion-title>First Page</ion-title>
<button menuToggle="testRightMenu">
<icon menu></icon>
</button>
</ion-navbar>
<ion-content>
<ion-card>
<ion-card-content>
First page content
</ion-card-content>
</ion-card>
</ion-content>
</ion-content>You could also use multiple menus, you can enable/disable specific menus per page:
please this link is broken. do you have any link that uses tabs and sidemenus in the same page but not rooot pages.
Thanks
I was able to fix it. guess i was just confused by the content element and where it should be located. Thanks
Updated the link to the current repo. Sorry for the confusion!
@brandyshea the link is still broken 
Fixed. We renamed the ionic directory to src so there may be other links broken as well. Just let me know if you see any more or flag the post. Thanks!
Thank you @brandyshea, it works now 
This link is broken too : http://ionicframework.com/docs/v2/native/Push/
I’ll let you know if I find others. Thanks
The link seems to be broken again. Would be nice if you can fix it.
A fixed link to the multiple menu demo:
https://github.com/driftyco/ionic/tree/master/src/components/menu/test/multiple
Is it possible to have a left menu and a right menu active at the same time?
I want the left menu for navigation and the right menu to display a Help menu.
How does one use menuToggle=“right” for example?
Hello,
Here’s an example with two menus :
1) main-menu (left) is defined in app.html and refers to #mainContent ;
2) sub-menu (right) is defined in home.html (a sub page wich is used as rootPage btw) and refers to #subContent.
In home.html there are two buttons to control each menu via menuToggle="id-of-the-menu".
Info : If you define both menus in same html, they must refers to same #content, no more #mainContent and #subContent but only one #content (i’m still trying to understand what “contents” has to be).
Anyway, don’t know if it’s the way to do it but it works for me 
This is app.html :
<ion-menu id="main-menu" side="left" [content]="mainContent">
<p>hello main menu</p>
</ion-menu>
<ion-nav [root]="rootPage" #mainContent swipeBackEnabled="true"></ion-nav>
This is home.html :
<ion-menu id="sub-menu" side="right" [content]="subContent">
<p>hello sub menu</p>
</ion-menu>
<ion-content padding #subContent>
<button ion-button menuToggle="main-menu">open main menu</button>
<button ion-button menuToggle="sub-menu">open sub menu</button>
<p>content of the sub page</p>
</ion-content>Thanks! Not sure I understand though, you don’t happen to have a demo somewhere?
Here’s a demo with bugs inside (opening menu 2 while menu 1 is open).
It can be a starting point. Let me know if you can work with that 
Thank you very much! I thought there’d be more code 
I’ll have a play and see if I can get it to do what I want.
Much appreciated.
Thanks again, I got it working and it was super simple using your example!
Hello, thank you for the feedback, i’m glad i could help