Responsive Vertical Menu is a small JavaScript library that helps you create a mobile-friendly, responsive, and space-saving side navbar using HTML, CSS, and JS for your web projects.

responsive sidebar navigation menu, mobile-friendly sidebar menu responsive, css sidebar navigation menu with icons

Responsive Vertical Navigation Menu | jQuery rvnm

How to make use of it:

1. Load the required vertical-response.min.css stylesheet and the required vertical-response-response-menu.min.js script into your project.

<link href="vertical-responsive-menu.min.css" rel="stylesheet">
<script src="vertical-responsive-menu.min.js"></script>

2. Create a nested navigation menu for multi-level sidebar navigation as follows:

<nav class="vertical_nav">

<ul id="js-menu" class="menu">

  <li class="menu--item  menu--item__has_sub_menu">

    <label class="menu--link" title="Item 1">
      <i class="menu--icon></i>
      <span class="menu--label">Item 1</span>
    </label>

    <ul class="sub_menu">
      <li class="sub_menu--item">
        <a href="#" class="sub_menu--link sub_menu--link__active">Submenu</a>
      </li>
      <li class="sub_menu--item">
        <a href="#" class="sub_menu--link">Submenu</a>
      </li>
      <li class="sub_menu--item">
        <a href="#" class="sub_menu--link">Submenu</a>
      </li>
    </ul>
  </li>

  <li class="menu--item">
    <a href="#" class="menu--link" title="Item 2">
      <i class="menu--icon"></i>
      <span class="menu--label">Item 2</span>
    </a>
  </li>

  <li class="menu--item">
    <a href="#" class="menu--link" title="Item 3">
      <i class="menu--icon"></i>
      <span class="menu--label">Item 3</span>
    </a>
  </li>

  <li class="menu--item  menu--item__has_sub_menu">

    <label class="menu--link" title="Item 4">
      <i class="menu--icon"></i>
      <span class="menu--label">Item 4</span>
    </label>

    <ul class="sub_menu">
      <li class="sub_menu--item">
        <a href="#" class="sub_menu--link">Submenu</a>
      </li>
      <li class="sub_menu--item">
        <a href="#" class="sub_menu--link">Submenu</a>
      </li>
      <li class="sub_menu--item">
        <a href="#" class="sub_menu--link">Submenu</a>
      </li>
    </ul>
  </li>

  <li class="menu--item">
    <a href="#" class="menu--link" title="Item 5">
      <i class="menu--icon"></i>
      <span class="menu--label">Item 5</span>
    </a>
  </li>

</ul>

<button id="collapse_menu" class="collapse_menu">
  <i class="collapse_menu--icon"></i>
  <span class="collapse_menu--label">Recolher menu</span>
</button>

</nav>

3. You can change the breakpoint as you like in CSS.

@media (min-width: 992px) {

...

}

Responsive Sidebar Navigation, Vertical Responsive Menu Plugin/Github

See Demo And Download

Official Website(cbfranca): Click Here

This superior jQuery/javascript plugin is developed by cbfranca. For extra Advanced usage, please go to the official website.