Ionic-framework: Side Menu on Right not Possible

[cawoodm]

Short description of the problem:

<ion-side-menu side="right"> just causes menu to stop working (and still appear left). Clicking on the menu icon does nothing and there are no JS errors in the console (Chrome 47.0).

What behavior are you expecting?

I would expect the side menu to appear on the right and function.

Which Ionic Version? 1.x or 2.x

Cordova CLI: 6.0.0
Ionic Version: 1.1.1
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS: Windows 7 SP1
Node Version: v4.2.6

Code

<ion-side-menus enable-menu-with-back-views="true">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable">
            <ion-nav-back-button></ion-nav-back-button>
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="side-menu21"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="right">
        <ion-header-bar class="bar-stable">
            <div class="title">Quick Menu</div>
        </ion-header-bar>
        <ion-content padding="false" class="side-menu-left has-header">
            <ion-list>
                <ion-item ui-sref="quickMenu.home" menu-close="">Home</ion-item>
                <ion-item ui-sref="quickMenu.bPS" menu-close="">BPS</ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

[jgw96]

Hello! Thanks for posting your code, makes debugging alot easier! With your current setup the menu should open from the right, but you are correct that the menu button is not going to work, you should be able to swipe to the right though and it should open the menu. To get the menu button to toggle correct, and get the menu button on the right side of your view you need to change <ion-nav-buttons side="left"> to <ion-nav-buttons side="right"> and change menu-toggle="left" to menu-toggle="right". Here is a screenshot of an example i wrote up:

Please let me know if this doesn't work for you!

[SanjayYadav90]

Hi team,
I am working on ionic2 and wanted to slide from Right to left
I can align my toggle menu on right
_but have issue that it is not being slid from right to left_
each case it slide from lift to right only,

this is code-

<ion-side-menu side="right">
   <ion-header>
      <ion-navbar>
         <button menuToggle="right" item-right>
         <img src="img/more_than_256.png" width="20" height="20">
         </button>
         <ion-title>My Menu List</ion-title>
      </ion-navbar>
   </ion-header>
</ion-side-menu>

How to get resolve ?

[kbala]

also change code like below in each page
<button right ion-button menuToggle>

[SanjayYadav90]

Thanks a lot @kbala ,
I thing that will also work for but I have not used it.
As I have asked this question a long back, so I have solved my issue and here is the code-

<ion-menu [content]="content" side="right" class="side-menu">

I have just just remove <ion-side-menu> tag with <ion-menu> and added one ionic tag as-

side = "right"

thats all, get my work done.

[gitdisrupt]

Assuming the button lives in a navbar, and assuming you want it positioned on the right side, the correct directives to set on that button in order to toggle open a menu on the right side are as follows:
<button ion-button menuToggle="right" right>
_whereas_ adding right just tells the button where to position itself.
_whereas_ adding menuToggle="right" tells the menuToggle directive _which menu_ to open.
A menu also has to exist with the side directive applied to it which in this case should be set to right as follows:
<ion-menu [content]="content" side="right">

[horcrux95]

@SanjayYadav90 Thanks for the solution. Saved a lot of time.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.