Materialize CSS Sidenav

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

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS