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. If you want to see a demo, our sidebar will use this on smaller screens.

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();
        

jQuery Plugin Methods

We have methods to show and hide your sidebar you can use to programmatically control your sidebar.


  // Show sideNav
  $('.button-collapse').sideNav('show');
  // Hide sideNav
  $('.button-collapse').sideNav('hide');
        

Sass Variables

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


  $sidenav-width: 240px;