jQuery Plugin For Multilevel Bootstrap Dropdown Navigation

jQuery Plugin For Multilevel Bootstrap Dropdown Navigation
File Size: 103 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A very small jQuery script that extends Bootstrap's navbar component into a fully responsive, multi-level dropdown navigation menu.

Currently supports the latest Bootstrap 4 framework!

How to use it:

1. Add the stylesheet navbar.css and JavaScript file navbar.js to your Bootstrap project.

<link rel="stylesheet" href="bootstrap.min.css">
<link href="css/navbar.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="js/navbar.js"></script>

2. Add a multilevel dropdown menu into your Bootstrap navbar following the markup structure like this:

<p>1. Add the stylesheet <code>navbar.css</code> and JavaScript file <code>navbar.js</code> to your Bootstrap project.</p>
<pre class="brush:xml;">
&lt;link rel=&quot;stylesheet&quot; href=&quot;bootstrap.min.css&quot;&gt;
&lt;link href=&quot;css/navbar.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/navbar.js&quot;&gt;&lt;/script&gt;

3. That's it. You can add as many child dropdown menus as you like.



  • hotfix - open link when it is just a link


  • Supports Bootstrap 4.


  • Allows to open the submenu in the left side of parent


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