Materialize CSS SideNav

In this tutorial, you will learn how to create a Materialize sidenav that can be opened from either the left or right side.

Materialize CSS SideNav (Materialize sidebar) is a slide-out menu. It means whenever the user clicks on the navigation trigger link (Hamburger link or button), it opens the navigation panel either from the left side or from the right side.

Materialize sidenav menu is a mobile-friendly navbar. The hamburger icon appears on smaller screen sizes, such as on mobile devices. When a user clicks on the hamburger icon, the sidebar opens from either the left or right side, displaying all navigation links within the navigation panel.

Please note that the SideNav HTML source code should not be contained within the navbar HTML code.

Example

Basic steps to create a Materialize Sidenav :

Assign the .sidenav class to the unordered list container i.e <ul> element and keep in mind that id attribute should have unique value.

General Syntax
      
         <ul id="slide-out" class="sidenav"> </ul>
       
    

Now, assign the unordered list id attribute value to the link's or button's data-attribute value and add the .sidenav-trigger class to the link or button element.

Sidenav Trigger Button
 
   <a href="#" data-target="slide-out" class="sidenav-trigger btn">Click Here</a>    
   

To initialize the Materialize sidebar, use either jQuery or Javascript.

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 To See The Sidebar Menu
</a>
    
Try it now

Source Code

          <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="../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>
<div class="container center-align">
  <p>Materialize CSS Right Sidebar Menu</p>
  <a href="#" data-target="slide-out" class="sidenav-trigger btn">
    Click To See The Sidebar Menu
  </a>
</div>
        
Try it now

Fixed HTML Structure

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

Example

General Syntax

      <ul id="slide-out" class="sidenav sidenav-fixed">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger">
  <i class="material-icons">menu</i>
</a>
    
Try it now

Fullscreen HTML Structure

If you want to access sidebar on all the screen sizes, then add a simple helper class show-on-large to the .sidenav-trigger.

Example

Source Code

          <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

How Create Right Sidebar In Materialize CSS

The material sidebar opens generally from the left side of the page, and its default value of the edge property is left. So, if you want to make the right sidebar in materialize CSS, then set the edge property value to right.

Right Sidenav Initialization
      
  // jQuery Initialization For Right Sidenav
  $(document).ready(function(){
    $('.sidenav').sidenav({
      edge:'right'
   });
  });
   

Source Code

          <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">Ashok Dev</span></a>
      <a href="#email"><span class="white-text email">ashokdev@gmail.com</span></a>
    </div>
  </li>
  <li><a href="#!">API</a></li>
  <li><a href="#!">Android App</a></li>
  <li><div class="divider"></div></li>
  <li><a class="subheader">ios 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">Right Sidebar</a>
        
Try it now

Conclusion

The sidenav in Materialize CSS is a slide-out menu that opens either from the left or right side of the web page. If you want to open the sidebar menu only on a large screen, then use the sidenav-fixed class. If you want to access the materialize CSS sidebar on all screen sizes, then use the .Show-on-large class.

Web Tutorials

Materialize CSS  SideNav
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4