Left Aligned Links

To left align your navbar links, just add a left class to your <ul> that contains them.



  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo right">Logo</a>
      <ul id="nav-mobile" class="left side-nav">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="components.html">Components</a></li>
        <li><a href="javascript.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>
        

Icon Links


You can add icons into links. For icon only links you don't need any additional class. Just pop the i tag in and it will work.


  <nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="brand-logo">Logo</a>
        <ul class="side-nav">
          <li><a href="sass.html"><i class="mdi-action-search"></i></a></li>
          <li><a href="components.html"><i class="mdi-action-view-module"></i></a></li>
          <li><a href="javascript.html"><i class="mdi-navigation-refresh"></i></a></li>
          <li><a href="mobile.html"><i class="mdi-navigation-more-vert"></i></a></li>
        </ul>
      </div>
    </div>
  </nav>


For adding an icon to a text link you need to add either a left or right class to the icon depending on where you want the icon to be.


  <nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="brand-logo">Logo</a>
        <ul class="side-nav">
          <li><a href="sass.html"><i class="mdi-action-search left"></i>Link with Left Icon</a></li>
          <li><a href="components.html"><i class="mdi-action-view-module right"></i>Link with Right Icon</a></li>
        </ul>
      </div>
    </div>
  </nav>

Mobile Collapse Button


When your nav bar is resized, you will see that the links on the right turn into a hamburger icon . Take a look at the example below to get this functionality. Add the entire button-collapse line to your nav.


  <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo">Logo</a>
        <ul id="nav-mobile" class="right side-nav">
          <li><a href="sass.html">Sass</a></li>
          <li><a href="components.html">Components</a></li>
          <li><a href="javascript.html">JavaScript</a></li>
        </ul>

        <!-- Include this line below -->
        <a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
        <!-- End -->

      </div>
    </nav>
          

Initialization

After including the button-collapse line into your navbar, all you have to do now is place this code in your page's $( document ).ready(function(){}) code. This example below assumes you have not modified the classes in the above example. In the case that you have, just change the jQuery selector in the line below to match it.


    $(".button-collapse").sideNav();