Two side menus, one on each side

Hi,

I was wondering what’s the best and easiest way to have a side menu on both left and right sides, with different content. Left will be main navigation while the right one will contain some additional functionality/navigation.

I’m using the ionic start myApp sidemenu starter template from the tutorial as a starting point. All and any help would be much appreciated, thanks in advance!

You would just add a new ion-side-menu element and make it’s side right

2 Likes

Thank you very much for your help, works just fine :smile:

Hi,
I’m trying to use two ion-side-menu too, but it seems that the menus are beeing inserted in the same view, let me show you:

left:(The second image shows what is happening when I try to drag the menu.)

right

Thank you,
Mark

@markgxt can you provide some code or a codepen demo?

I want to display a plus icon on the right hand side to pull the right side menu into the screen.

<ion-side-menus enable-menu-with-back-views="false">

<ion-side-menu-content>
	<ion-nav-bar class="bar-positive nav-title-slide-ios7">
		<ion-nav-back-button>
		</ion-nav-back-button>

		<ion-nav-buttons>
			<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
			<button class="button button-icon button-clear ion-ios7-plus-empty" menu-toggle="right"></button>
		</ion-nav-buttons>
	</ion-nav-bar>
	<ion-nav-view name="mainContent"></ion-nav-view>
</ion-side-menu-content>


The above code is displaying the icon on the left side next to the navicon. Am I missing a button class there for the plus icon?

Figured out. Looks like each of those buttons should go into their own with side attribute specified.

		<ion-nav-buttons side="left">
			<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
		</ion-nav-buttons>
		<ion-nav-buttons side="right">
			<button class="button button-icon button-clear ion-ios7-plus-empty" menu-toggle="right"></button>
		</ion-nav-buttons>

Just FYI

its working nicely…thanks a lot…