jQuery Plugin For Multilevel Bootstrap Dropdown Navigation

jQuery Plugin For Multilevel Bootstrap Dropdown Navigation

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

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.

Change log:


  • 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.

  • Publication date: 17.02.2018
  • Source