Materialize CSS Sidenav

Materialize CSS Sidenav is a slide out menu. Although, dropdown menu can be added inside the sidebar using collapsible component of Materialize CSS easily.

Basic steps to create sidenav:

Assign the .sidenav to the unordered list container i.e <ul> element base class and make sure id attribute consists of unique value.
Unordered List
```
 
   <ul id="slide-out" class="sidenav"> </ul>      
   
```
At the end, assign the unordered list id attribute value to the link's or button's data-attribute value and assign the .sidenav-trigger class to the link or button element base class.
Sidenav Trigger Button
```
 
   <a href="#" data-target="slide-out" class="sidenav-trigger btn">Click Here</a>    
   
```

At the end, initialize the sidenav using Javascript or jQuery.

Sidenav Initialization
         
 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });
  // Or with jQuery
  $(document).ready(function(){
    $('.sidenav').sidenav();
  });
   
  

General Syntax

<ul id="slide-out" class="sidenav"> </ul>
<a href="#" data-target="slide-out" class="sidenav-trigger btn">Click Here</a>

Try It Now

Source Code

Download

<ul id="slide-out" class="sidenav">
  <li>
    <div class="user-view">
      <div class="background">
        <img src="https://picsum.photos/300/300" />
      </div>
      <a href="#user"><img class="circle" src="../code-support/images/person-chip.jpg" /></a>
      <a href="#name"><span class="white-text name">John Doe</span></a>
      <a href="#email"><span class="white-text email">johndoe@gmail.com</span></a>
    </div>
  </li>
  <li><a href="#!">Learn Web development</a></li>
  <li><a href="#!">Learn Graphics Designing</a></li>
  <li><div class="divider"></div></li>
  <li><a class="subheader">Mobile App </a></li>
  <li><a class="waves-effect" href="#!">Mobile App design & Development</a></li>
</ul>

<a href="#" data-target="slide-out" class="sidenav-trigger btn">Click To See The Sidebar Menu</a>

Try it yourself

Fixed HTML Structure

Add the .sidenav-fixed class to the sidenav. It opens on large screens and hides the regular functionality on the smaller screens.

General Syntax

<ul id="slide-out" class="sidenav sidenav-fixed"></ul>
<a href="#" data-target="slide-out" class="sidenav-trigger">
     <i class="material-icons">menu</i>
</a>

Try It Now

Fullscreen HTML Structure

To access sidebar menu on all the screensizes, you jave to add the .show-on-large class to the .sidenav-trigger.

General Syntax

<ul id="slide-out" class="sidenav"> </ul>
 <a href="#" data-target="slide-out" class="sidenav-trigger show-on-large" >
    <i class="material-icons">menu</i>
</a>

Try It Now

Materialize CSS Sidenav

Unordered List

Sidenav Trigger Button

Sidenav Initialization

General Syntax

Source Code

Fixed HTML Structure

General Syntax

Fullscreen HTML Structure

General Syntax

Web Tutorials