December 29, 2016

Materialize SideNav

Materialize SideNav Menu : SideNav is one of the main component of any webpage which provides users side navigation. It is very easy to create sidenav in Materialize framework. As it is jQuery plugin so it needs the initialization. Here in this tutorial we are going to explain how you can create side navigation Menu in Materialize. You can also use our online editor to edit and run the code online.

Materialize SideNav Example

There are basically two parts of sidenav- 1. HTML, 2. jQuery. HTML part contains the sidenav html menu item stuffs and jQuery contains the script to initialize the side navigation menu. Let us create a simple navigation menu as below-

Materialize SideNav Menu with Dropdown Example

 
<ul id="slide-out" class="side-nav">
      <li><a href="#!">Item 1</a></li>
      <li><a href="#!">Item 2</a></li>
      <li><a href="#!">Item 3</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header">Dropdown<i class="material-icons">arrow_drop_down</i></a>
            <div class="collapsible-body">
              <ul>
                <li><a href="#!">Dropdown Item 1</a></li>
                <li><a href="#!">Dropdown Item 2</a></li>
                <li><a href="#!">Dropdown Item 3</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
<script>
 $(".button-collapse").sideNav();
</script>

Try it »

If you run the above example it will produce the output something like this-