Materialize CSS SideNav

Materialize CSS SideNav is a slide out menu. A dropdown menu can be added inside the sidebar using a collapsible component of materialized CSS.

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

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">
  <h4>Materialize CSS Side Nav Menu</h4>
  <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.

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

Materialize CSS SideNav

Fixed HTML Structure

Web Tutorials