Modern Off-canvas Accordion Navigation With jQuery - sidenav

A simple and tiny jQuery plugin that helps you create a modern, mobile-friendly, off-canvas, sidebar accordion menu for your cross-platform webpages.

How to use it:

1. Place the required stylesheet sidenav.min.css in the head of the webpage.

<link rel="stylesheet" href="sidenav.min.css">

2. Create the sidebar off-canvas navigation as follows:

<nav class="sidenav" data-sidenav data-sidenav-toggle="#sidenav-toggle">
  <div class="sidenav-brand">
    BRAND
  </div>

  <div class="sidenav-header">
    Section Header
    <small>secondary text</small>
  </div>

  <ul class="sidenav-menu">
    <li>
      <a href="javascript:;" data-sidenav-dropdown-toggle class="active">
        <span class="sidenav-link-icon">
          <i class="material-icons">store</i>
        </span>
        <span class="sidenav-link-title">Lorem ipsum</span>
        <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>
          <i class="material-icons">arrow_drop_down</i>
        </span>
        <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>
          <i class="material-icons">arrow_drop_up</i>
        </span>
      </a>

      <ul class="sidenav-dropdown" data-sidenav-dropdown>
        <li><a href="javascript:;">Dolor sit amet</a></li>
        <li><a href="javascript:;">Consectetur adipisicing</a></li>
        <li><a href="javascript:;">Elit</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:;" data-sidenav-dropdown-toggle>
        <span class="sidenav-link-icon">
          <i class="material-icons">payment</i>
        </span>
        <span class="sidenav-link-title">Sed do eiusmod</span>
        <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>
          <i class="material-icons">arrow_drop_down</i>
        </span>
        <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>
          <i class="material-icons">arrow_drop_up</i>
        </span>
      </a>

      <ul class="sidenav-dropdown" data-sidenav-dropdown>
        <li><a href="javascript:;">Tempor incididunt</a></li>
        <li><a href="javascript:;">Labore</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:;" data-sidenav-dropdown-toggle>
        <span class="sidenav-link-icon">
          <i class="material-icons">shopping_cart</i>
        </span>
        <span class="sidenav-link-title">Dolore magna</span>
        <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>
          <i class="material-icons">arrow_drop_down</i>
        </span>
        <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>
          <i class="material-icons">arrow_drop_up</i>
        </span>
      </a>

      <ul class="sidenav-dropdown" data-sidenav-dropdown>
        <li><a href="javascript:;">Aliqua</a></li>
        <li><a href="javascript:;">Exercitation</a></li>
        <li><a href="javascript:;">Minim veniam</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:;">
        <span class="sidenav-link-icon">
          <i class="material-icons">assignment_ind</i>
        </span>
        <span class="sidenav-link-title">Nostrud ullamco</span>
      </a>
    </li>
    <li>
      <a href="javascript:;">
        <span class="sidenav-link-icon">
          <i class="material-icons">alarm</i>
        </span>
        <span class="sidenav-link-title">Commodo</span>
      </a>
    </li>
  </ul>

  <div class="sidenav-header">
    Another Section Header
  </div>

  <ul class="sidenav-menu">
    <li>
      <a href="javascript:;" data-sidenav-dropdown-toggle>
        <span class="sidenav-link-icon">
          <i class="material-icons">date_range</i>
        </span>
        <span class="sidenav-link-title">Reprehenderit</span>
        <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>
          <i class="material-icons">arrow_drop_down</i>
        </span>
        <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>
          <i class="material-icons">arrow_drop_up</i>
        </span>
      </a>

      <ul class="sidenav-dropdown" data-sidenav-dropdown>
        <li><a href="javascript:;">Voluptate</a></li>
        <li><a href="javascript:;">Excepteur</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:;">
        <span class="sidenav-link-icon">
          <i class="material-icons">backup</i>
        </span>
        <span class="sidenav-link-title">Occaecat</span>
      </a>
    </li>
    <li>
      <a href="javascript:;">
        <span class="sidenav-link-icon">
          <i class="material-icons">settings</i>
        </span>
        <span class="sidenav-link-title">Deserunt</span>
      </a>
    </li>
  </ul>
</nav>

3. Create a menu toggle link on the webpage.

<a href="javascript:;" class="toggle" id="sidenav-toggle">
  <i class="material-icons">menu</i>
</a>

4. Place jQuery library and the JavaScript file sidenav.min.js at the end of the webpage.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="sidenav.min.js"></script>

5. Initialize the sidebar off-canvas navigation with one JS call.

$('[data-sidenav]').sidenav();

Change log:

2017-03-04

• Added new settings variables

---

This awesome jQuery plugin is developed by eumatheusgomes. For more Advanced Usages, please check the demo page or visit the official website.