How do I open a Materialize SideNav on the right, instead of the left?

Question

I am using the Materialize design framework, but I want to open the SideNav from the right side. I don't know much more about Materialize. Right now my SideNav opens from the left side, but I want to open the SideNav from the right side.

 $('.button-collapse').sideNav({ menuWidth: 300, // Default is 240 closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor } ); $('.collapsible').collapsible(); 

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> <nav> <ul class="hide-on-med-and-down"> <li><a href="#!">First Sidebar Link</a></li> <li><a href="#!">Second Sidebar Link</a></li> </ul> <ul id="slide-out" class="side-nav fixed"> <li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li> <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li> <li class="no-padding"> <ul class="collapsible collapsible-accordion"> <li> <a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a> <div class="collapsible-body"> <ul> <li><a href="#!">First</a></li> <li><a href="#!">Second</a></li> <li><a href="#!">Third</a></li> <li><a href="#!">Fourth</a></li> </ul> </div> </li> </ul> </li> </ul> <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a> </nav> 

Answer 1

Try to use edge: 'right' on '.button-collapse'.sideNav(...) like so:

 $('.button-collapse').sideNav({ menuWidth: 300, closeOnClick: true, edge: 'right', // <--- CHECK THIS OUT } ); $('.collapsible').collapsible(); 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> <nav> <ul class="right hide-on-med-and-down"> <li><a href="#!">First Sidebar Link</a></li> <li><a href="#!">Second Sidebar Link</a></li> </ul> <ul id="slide-out" class="side-nav fixed"> <li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li> <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li> <li class="no-padding"> <ul class="collapsible collapsible-accordion"> <li> <a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a> <div class="collapsible-body"> <ul> <li><a href="#!">First</a></li> <li><a href="#!">Second</a></li> <li><a href="#!">Third</a></li> <li><a href="#!">Fourth</a></li> </ul> </div> </li> </ul> </li> </ul> <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a> </nav> 

Answer 2

If you are using Angular with materialize, make sure you have:

    $('.button-collapse').sideNav({
      menuWidth: 300,
      closeOnClick: true,
      edge: 'right', // <--- CHECK THIS OUT
    }
  );
  $('.collapsible').collapsible();

called from a function in your controller. Mine looks like this:

    home.parallax = function() {
  $('.parallax').parallax()
}

home.sideNav = function() {
  $('.button-collapse').sideNav({
    menuWidth     : 300,
    edge          : 'right',
    closeOnClick  : true,
    draggable     : true
  });
}

I think its silly now to have to say this but I was driving myself crazy trying to modify things like edge and menuWidth from the init.js file that I thought the documentation told me I needed for the sideNav to work.

Hope that helps everyone who, like me, set edge to 'right' only to see it on the left again and again after a couple good, hard resets.