How to make use of it:

1. Load the Font Awesome for the menu items.

<link rel="stylesheet" href="/path/to/font-awesome.min.css" />

2. Load the wanted jQuery library from a CDN.

<script src="/path/to/cdn/jquery.min.js"></script>

3. Download and load the jQuery rvnm plugin’s JavaScript and Stylesheet within the doc.

<link rel="stylesheet" href="src/jquery-rvnm.css" />
<script src="src/jquery-rvnm.js"></script>

4. Create the sidebar navigation from a nested nav listing as follows:

<nav id="navbar" class="">
  <ul>
    <li> <span class="spliter"> <i class="fa fa-cart-plus"></i> Aliquam dictum </span> </li>
    <li> <a href="#"> <i class="fa fa-bell-o"></i> eleifend risus </a>
      <ul>
        <li> <a href="#"> suscipit mauris </a> </li>
        <li> <a href="#"> sed placerat ipsum </a> </li>
        <li> <a href="#"> Proin turpis </a> </li>
      </ul>
    </li>
    <li> <a href="#"> <i class="fa fa-plus-square"></i> Nunc eleifend molestie velit. Morbi lobortis quam eu velit </a>
      <ul>
        <li> <a href="#"> semper leo </a> </li>
        <li> <a> habitasse platea </a>
          <ul>
            <li> <a href="#"> dictumst </a> </li>
            <li> <a href="#"> Vivamus facilisis </a> </li>
            <li> <a href="#"> In hac habitasse </a>
              <ul>
                <li><a href="#"> platea dictumst </a></li>
                <li><a href="#">Nunc sed lacus</a></li>
                <li><a href="#">euismod gravida </a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li> <a href="#"> sed placerat ipsum </a> </li>
      </ul>
    </li>
    <li class=""> <a href="#"> <i class="fa fa-bullhorn"></i> bibendum dapibus </a> </li>
    <li> <a href="#"> <i class="fa fa-building"></i> Proin nonummy </a> </li>
    <li> <span class="spliter"> <i class="fa fa-bars"></i> Nullam non diam </span> </li>
    <li> <a href="#"> <i class="fa fa-align-center"></i> platea dictumst </a>
      <ul>
        <li> <a href="#"> lacus at augue </a> </li>
        <li> <a href="#"> pede felis </a> </li>
        <li> <a href="#"> dignissim leo </a> </li>
      </ul>
    </li>
    <li> <a href="#"> <i class="fa fa-amazon"></i> second </a> </li>
    <li> <a href="#"> <i class="fa fa-apple"></i> third </a> </li>
    <li> <span class="spliter"> <i class="fa fa-desktop"></i> splliter teest </span> </li>
    <li> <a href="#"> <i class="fa fa-expand"></i> quis lectus </a>
      <ul>
        <li> <a href="#"> Nunc sed lacus </a> </li>
        <li> <a href="#"> Pellentesque </a> </li>
        <li> <a href="#"> malesuada nulla </a> </li>
      </ul>
    </li>
    <li> <a href="#"> <i class="fa fa-address-book"></i> ipsum urna sed risus </a> </li>
    <li> <span class="spliter"> <i class="fa fa-cut"></i> Maecenas fermentum </span> </li>
    <li> <a href="#"> <i class="fa fa-yoast"></i> sunt in culpa </a>
      <ul>
        <li> <a href="#"> officia deserunt </a> </li>
        <li> <a href="#"> mollit anim id </a> </li>
        <li> <a href="#"> id est laborum </a> </li>
      </ul>
    </li>
    <li> <a href="#"> <i class="fa fa-bank"></i> Aenean magna nisl </a> </li>
  </ul>
</nav>

5. Wrap your content right into a container named wrapper.

<div id="wrapper">
  Main Content Here
</div>

6. Initialize the jQuery rvnm plugin on the nav.

var rvnm = $("#navbar").rvnm();

7. Set the preliminary display mode.

var rvnMenu = $("#navbar").rvnm({
    mode: 'minimal'
});

8. Set the theme you need to make use of. All accessible themes:

var rvnMenu = $("#navbar").rvnm({
    theme: 'dark-lesb'
});

9. Enable & disable the search field.

var rvnMenu = $("#navbar").rvnm({
    searchable: true
});

WordPress Style Vertical Sidebar Navigation Plugin, rvnm Github, jquery menu examples

See Demo And Download