jQuery Plugin For Multilevel Bootstrap Dropdown Navigation
File Size: | 52.9 KB |
---|---|
Views Total: | 13925 |
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.
Works perfectly with Bootstrap 3/4/5 frameworks.
Installation:
# Yarn $ yarn add bootstrap-navbar-dropdowns # NPM $ npm install bootstrap-navbar-dropdowns --save
How to use it:
1. Add the stylesheet navbar.css
and JavaScript file navbar.js
to your Bootstrap project.
<!-- Required Resources --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/cdn/popper.min.js"></script> <script src="/path/to/cdn/bootstrap.min.js"></script> <!-- For Bootstrap 3 --> <link rel="stylesheet" href="/path/to/dist/css/bootstrap-navbar-dropdowns-bs3.min.css"> <script src="/path/to/dist/js/bootstrap-navbar-dropdowns.min.js"></script> <!-- For Bootstrap 4 --> <link rel="stylesheet" href="/path/to/dist/css/bootstrap-navbar-dropdowns-bs4.min.css"> <script src="/path/to/dist/js/bootstrap-navbar-dropdowns.min.js"></script> <!-- For Bootstrap 5 --> <link rel="stylesheet" href="/path/to/dist/css/bootstrap-navbar-dropdowns-bs5.min.css"> <script src="/path/to/dist/js/bootstrap-navbar-dropdowns.min.js"></script>
2. Add a multilevel dropdown menu into your Bootstrap navbar following the markup structure like this:
<!-- Bootstrap 3 --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="http://www.youtube.com" target="_blank">Action 1 - Youtube</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">Next level</li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1.1 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Action1.1</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1.1.1 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a target="_blank" href="http://www.google.com">Action1.1.1 - Google</a></li> </ul> </li> </ul> </li> </ul> </li> <!-- Bootstrap 4 --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown1</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item"><a href="http://www.youtube.com" target="_blank">Action 1 - Youtube</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown1.1</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item"><a href="#">Action 1.1</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown1.1.1</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item"><a target="_blank" href="http://www.google.com">Action 1.1.1 - Google</a></li> </ul> </li> </ul> </li> </ul> </li> <!-- Bootstrap 5 --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown1" data-flip="false" data-toggle="dropdown" aria-expanded="false">Dropdown1</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li><a class="dropdown-item" href="http://www.youtube.com" target="_blank">Action 1 - Youtube</a></li> <li class="dropdown"> <a class="dropdown-item dropdown-toggle" href="#">Dropdown1.1</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action 1.1</a></li> <li class="dropdown"> <a class="dropdown-item dropdown-toggle" href="#">Dropdown1.1.1</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" target="_blank" href="http://www.google.com">Action 1.1.1 - Google</a></li> </ul> </li> </ul> </li> </ul> </li>
3. Initialize the plugin and done. You can add as many child dropdown menus as you like.
$('.navbar').navbarDropdown({ // bs3 | bs4 | bs5 theme: 'bs4', // click | mouseover trigger: 'click', // override the default selector of the dropdown dropdownSelector: null });
Changelog:
2020-10-19
- Removed debugs
2020-10-19
- Add theme option to plugin
v4.0.2 (2020-03-28)
- transform to npm package
2018-12-02
- hotfix - open link when it is just a link
2018-08-01
- Supports Bootstrap 4.
2018-02-17
- Allows to open the submenu in the left side of parent
2016-11-15
- JS update
This awesome jQuery plugin is developed by fontenele. For more Advanced Usages, please check the demo page or visit the official website.