Responsive Vertical Navigation Menu | jQuery rvnm

rvnm is responsive vertical menu navigation just like the WordPress menu, with search and themes. rvnm is a jQuery plugin that helps developers create responsive and easy-to-use sidebar navigation as you can see in the WordPress admin panel.

jquery navigation bar, jquery menu bar with submenu, navbar plugin wordpress, jquery menu responsive, jquery sidebar menu with submenu


  • Supports unlimited list levels.
  • Collapse / Expand submenus just like an accordion.
  • Two display modes: desktop and mobile.
  • 5 built-in themes.
  • It allows the user to search the navigation items via the search field.
  • Licensed under GPL-3.0.

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="">
    <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>
        <li> <a href="#"> suscipit mauris </a> </li>
        <li> <a href="#"> sed placerat ipsum </a> </li>
        <li> <a href="#"> Proin turpis </a> </li>
    <li> <a href="#"> <i class="fa fa-plus-square"></i> Nunc eleifend molestie velit. Morbi lobortis quam eu velit </a>
        <li> <a href="#"> semper leo </a> </li>
        <li> <a> habitasse platea </a>
            <li> <a href="#"> dictumst </a> </li>
            <li> <a href="#"> Vivamus facilisis </a> </li>
            <li> <a href="#"> In hac habitasse </a>
                <li><a href="#"> platea dictumst </a></li>
                <li><a href="#">Nunc sed lacus</a></li>
                <li><a href="#">euismod gravida </a></li>
        <li> <a href="#"> sed placerat ipsum </a> </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>
        <li> <a href="#"> lacus at augue </a> </li>
        <li> <a href="#"> pede felis </a> </li>
        <li> <a href="#"> dignissim leo </a> </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>
        <li> <a href="#"> Nunc sed lacus </a> </li>
        <li> <a href="#"> Pellentesque </a> </li>
        <li> <a href="#"> malesuada nulla </a> </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>
        <li> <a href="#"> officia deserunt </a> </li>
        <li> <a href="#"> mollit anim id </a> </li>
        <li> <a href="#"> id est laborum </a> </li>
    <li> <a href="#"> <i class="fa fa-bank"></i> Aenean magna nisl </a> </li>

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

<div id="wrapper">
  Main Content Here

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

Official Website(4xmen): Click Here

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

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…