Introduction

This is a slide out menu. If you want a sidebar that will work on all widths, just add the class full to your sidebar list. You can add a dropdown to your sidebar by using our collapsible component.

Open Sidebar

Full HTML Structure

Add the class full to have the sideNav openable on all screen sizes like the example above.


  <ul id="slide-out" class="side-nav full">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
    <li class="no-padding">
      <ul class="collapsible collapsible-accordion">
        <li>
          <div class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></div>
          <div class="collapsible-body">
            <ul>
              <li><a href="#!">First Dropdown Link</a></li>
              <li><a href="#!">Second Dropdown Link</a></li>
              <li><a href="#!">Third Dropdown Link</a></li>
              <li><a href="#!">Fourth Dropdown Link</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </li>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
        

Fixed HTML Structure

Add the class fixed to have the sideNav be fixed and open on large screens and hides to the regular functionality on smaller screens. Our sideNav on the left is an example of this.


  <ul id="slide-out" class="side-nav fixed">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
        

Sidebar Alignment

Add the option right to your initialization.


  $(".button-collapse").sideNav({edge: 'right'});
        

jQuery Plugin Initialization


  // Initialize collapse button
  $(".button-collapse").sideNav();
  // Initialize collapsible
  $('.collapsible').collapsible();
        

Sass Variables

If you are using the Sass version you can specify the width in the variables.scss file.


  $sidenav-width: 240px;