jQuery Responsive Multi Level Dropdown Menu

The “vegas-nav” is a lightweight jQuery plugin that allows you to create a responsive multi level dropdown menu. The plugin renders a horizontal menu bar that converts into a hamburger menu on mobile devices. It supports up to three level submenus in both the left and right direction. Besides this, there is also a place for the mega menu to place your contents in Bootstrap grid-based columns.

Basically, the plugin doesn’t require Bootstrap CSS. However, you can use only Bootstrap grid CSS in order to create columns in the mega menu. On the other hand, the plugin allows you to easily turn it into the off-canvas menu on tablets, and mobile.

The submenus are based on HTML nested lists that also look pretty in the off-canvas menu on mobile screens. Similarly, the off-canvas menu can be slide from both the left or right side.

The vegas-nav jQuery plugin comes with a separate CSS theme file to easily customize the look of the navigation. So, you don’t need to tangle up with the entire CSS file.

How to Create Multi Level Dropdown Menu

First of all, load the vegas-nav’s assets into your webpage in order to create a mobile-friendly multi-level dropdown menu. Place the menu’s main CSS and theme CSS file into the head section of your HTML document. The plugin depends on Bootstrap grid CSS for mega menu, so also load it along with the vegas-nav CSS files.

<!-- Main css -->
<link href="dist/css/vgnav.css" rel="stylesheet" type="text/css">
<!-- Menu Theme CSS -->
<link href="dist/css/vgnav-theme.css" rel="stylesheet" type="text/css">
<!-- Bootstrap Grid CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css">

Now, create an HTML structure for multi-level navigation as follows:

<div class="navigation">
   <nav class="vg-nav vg-nav-lg">
      <ul>
         <li class="active">
            <a href="#">Home page</a>
         </li>
         <li class="dropdown">
            <a href="#">Left dropdown</a>
            <ul class="left">
               <li><a href="#">Any page</a></li>
               <li class="dropdown">
                  <a href="#">Second level</a>
                  <ul class="left">
                     <li><a href="#">Another page</a></li>
                     <li><a href="#">Any page</a></li>
                     <li class="dropdown">
                        <a href="#">Third level</a>
                        <ul class="left">
                           <li><a href="#">Any page</a></li>
                           <li><a href="#">Another page</a></li>
                        </ul>
                     </li>
                  </ul>
               </li>
               <li><a href="#">Another page</a></li>
            </ul>
         </li>
         <li class="dropdown-mega">
            <a href="#">Mega Menu</a>
            <div class="dropdown-mega-container">
               <div class="row">
                  <div class="col-md-4 text-left">
                     Left
                  </div>
                  <div class="col-md-4 text-center">
                     Center
                  </div>
                  <div class="col-md-4 text-right">
                     Right
                  </div>
               </div>
            </div>
         </li>
         <li>
            <a href="#">Any page</a>
         </li>
         <li class="dropdown">
            <a href="#">Right dropdown</a>
            <ul class="right">
               <li><a href="/">Any page</a></li>
               <li class="dropdown">
                  <a href="#">Second level</a>
                  <ul class="right">
                     <li><a href="#">Another page</a></li>
                     <li><a href="#">Any page</a></li>
                     <li class="dropdown">
                        <a href="#">Third level</a>
                        <ul class="right">
                           <li><a href="#">Any page</a></li>
                           <li><a href="$">Another page</a></li>
                        </ul>
                     </li>
                  </ul>
               </li>
               <li><a href="#">Another page</a></li>
            </ul>
         </li>
      </ul>
   </nav>
</div>

Use the following mentioned classes (for nav element) to enable the off-canvas menu on different media devices.

vg-nav-xl // Desktop and laptop
vg-nav-lg // Tablets landscape
vg-nav-md // Tablets portrait
vg-nav-sm // Phone landscape
vg-nav-xs // Phone portrait

After that, load the jQuery JavaScript library and menu’s plugin JS file just before the closing of the body tag.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"</script>
<!-- vgnav JS -->
<script src="dist/js/vgnav.min.js"></script>

Finally, initialize the plugin in the jQuery document ready function to get the working of the navigation menu. Place the following initialization code just after the vgnav.min.js  script file.

<script>	
 $(document).ready(function () {
		$('.vg-nav').vegasMenu();
	 })
</script>

That’s all! I hope this jQuery plugin helps you to easily build a responsive multi level dropdown menu. If you have any question or needs further plugin implementation guide,  don’t hesitate to comment below.