Materialize CSS
  Prev Page
Next Page  
Materialize SideNav
Materialize CSS SideNav is a slide out menu. 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.
HTML Structure
<div class="row">
    <div class="container">
    
        <ul id="slide-out" class="side-nav">
            <li><div class="user-view">
              <div class="background">
                <img src="../images/footer_bg.jpg">
              </div>
              <a href="#!user"><img class="circle" src="https://pbs.twimg.com/profile_images/877063380720173057/cTzoJiZ2_400x400.jpg"></a>
              <a href="#!name"><span class="white-text name">Free Time Learn</span></a>
              <a href="#!email"><span class="white-text email">freetimelearn@gmail.com</span></a>
            </div></li>
            
            <li><a class="waves-effect" href="#!"><i class="material-icons">code</i>HTML5</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">flare</i>CSS3</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">desktop_mac</i>Bootstrap 3</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">laptop_mac</i>Bootstrap 4</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">dvr</i>Materialize CSS</a></li>
            <li><div class="divider"></div></li>
            <li><a class="subheader">Scripts</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">input</i>JavaScript</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">show_chart</i>jQuery</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">local_grocery_store</i>Ajax</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">local_library</i>AngularJS</a></li>
        </ul>
       <a href="#" data-activates="slide-out" class="btn button-collapse blue hoverable">SIDE NAV</a>
    
    </div>
</div>
    
<script type="text/javascript">
	$(".button-collapse").sideNav();
</script>
Output :
jQuery Plugin Initialization
// Initialize collapse button
$(".button-collapse").sideNav();// Initialize collapsible (uncomment the line below if you use the dropdown variation)
//$('.collapsible').collapsible();
Options

You can customize the sideNav by setting your own width and the alignment of the menu, and explain folowing : 

$('.button-collapse').sideNav({
      menuWidth: 300, // Default is 300
      edge: 'right', // Choose the horizontal origin
      closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
      draggable: true, // Choose whether you can drag to open on touch screens,
      onOpen: function(el) { /* Do Stuff */ }, // A function to be called when sideNav is opened
      onClose: function(el) { /* Do Stuff */ }, // A function to be called when sideNav is closed
    }
  );
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');
// Destroy sideNav
$('.button-collapse').sideNav('destroy');
Dropdown HTML Structure

Add collapsible menus to your sidebar.

<div class="row">
    <div class="container">
    
        <ul id="slide-out" class="side-nav">
            <li><div class="user-view">
              <div class="background">
                <img src="../images/footer_bg.jpg">
              </div>
              <a href="#!user"><img class="circle" src="https://pbs.twimg.com/profile_images/877063380720173057/cTzoJiZ2_400x400.jpg"></a>
              <a href="#!name"><span class="white-text name">Free Time Learn</span></a>
              <a href="#!email"><span class="white-text email">freetimelearn@gmail.com</span></a>
            </div></li>
            <li class="no-padding">
                <ul class="collapsible collapsible-accordion">
                  <li>
                    <a class="collapsible-header">HTML5 <i class="material-icons">arrow_drop_down</i></a>
                    <div class="collapsible-body">
                      <ul>
                        <li><a href="#!">Tutorial</a></li>
                        <li><a href="#!">Examples</a></li>
                        <li><a href="#!">Interview Questions</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
            </li>
            <li class="no-padding">
                <ul class="collapsible collapsible-accordion">
                  <li>
                    <a class="collapsible-header">CSS3 <i class="material-icons">arrow_drop_down</i></a>
                    <div class="collapsible-body">
                      <ul>
                        <li><a href="#!">Tutorial</a></li>
                        <li><a href="#!">Examples</a></li>
                        <li><a href="#!">Interview Questions</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
            </li>
            <li class="no-padding">
                <ul class="collapsible collapsible-accordion">
                  <li>
                    <a class="collapsible-header">Bootstrap 3 <i class="material-icons">arrow_drop_down</i></a>
                    <div class="collapsible-body">
                      <ul>
                        <li><a href="#!">Tutorial</a></li>
                        <li><a href="#!">Examples</a></li>
                        <li><a href="#!">Interview Questions</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
            </li>
            <li class="no-padding">
                <ul class="collapsible collapsible-accordion">
                  <li>
                    <a class="collapsible-header">Bootstrap 4 <i class="material-icons">arrow_drop_down</i></a>
                    <div class="collapsible-body">
                      <ul>
                        <li><a href="#!">Tutorial</a></li>
                        <li><a href="#!">Examples</a></li>
                        <li><a href="#!">Interview Questions</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
            </li>
            <li class="no-padding">
                <ul class="collapsible collapsible-accordion">
                  <li>
                    <a class="collapsible-header">Materialize CSS <i class="material-icons">arrow_drop_down</i></a>
                    <div class="collapsible-body">
                      <ul>
                        <li><a href="#!">Tutorial</a></li>
                        <li><a href="#!">Examples</a></li>
                        <li><a href="#!">Interview Questions</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
            </li>
            <div class="divider"></div>
            <li><a class="waves-effect" href="#!"><i class="material-icons">input</i>JavaScript</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">show_chart</i>jQuery</a></li>
        </ul>
       <a href="#" data-activates="slide-out" class="btn button-collapse blue hoverable">SIDE NAV</a>
    
    </div>
</div>
    
<script type="text/javascript">
	$(".button-collapse").sideNav();
</script>
Output :
Fullscreen HTML Structure

If you want the menu to be accessible on all screensizes you just have to add these classes .button-collapse and .show-on-medium-and-up.

<div class="row">
    <div class="container">
    
        <ul id="slide-out" class="side-nav">
          <li><a class="waves-effect" href="#!"><i class="material-icons">code</i>HTML5</a></li>
          <li><a class="waves-effect" href="#!"><i class="material-icons">flare</i>CSS3</a></li>
          <li><a class="waves-effect" href="#!"><i class="material-icons">desktop_mac</i>Bootstrap 3</a></li>
          <li><a class="waves-effect" href="#!"><i class="material-icons">laptop_mac</i>Bootstrap 4</a></li>
          <li><a class="waves-effect" href="#!"><i class="material-icons">dvr</i>Materialize CSS</a></li>
       </ul>
       <a href="#" data-activates="slide-out" class="button-collapse show-on-medium-and-up"><i class="material-icons">menu</i></a>
    
    </div>
</div>
    
<script type="text/javascript">
	$(".button-collapse").sideNav();
</script>
Output :
Fixed HTML Structure

Add the .fixed class to have the sideNav be fixed and open on large screens and hides to the regular functionality on smaller screens. 

<style type="text/css">
   header, main, footer {
	 padding-left: 300px;
   }
	
  @media only screen and (max-width : 992px) {
     header, main, footer {
	   padding-left: 0;
     }
  }
</style>


<div class="row">
    <div class="container">
    
      <ul id="slide-out" class="side-nav fixed">
        <li><a class="waves-effect" href="#!"><i class="material-icons">code</i>HTML5</a></li>
        <li><a class="waves-effect" href="#!"><i class="material-icons">flare</i>CSS3</a></li>
        <li><a class="waves-effect" href="#!"><i class="material-icons">desktop_mac</i>Bootstrap 3</a></li>
        <li><a class="waves-effect" href="#!"><i class="material-icons">laptop_mac</i>Bootstrap 4</a></li>
        <li><a class="waves-effect" href="#!"><i class="material-icons">dvr</i>Materialize CSS</a></li>
      </ul>
      <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
    
    </div>
</div>
    
<script type="text/javascript">
	$(".button-collapse").sideNav();
</script>
Output :
SideNav
  Prev Page
Next Page