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.

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.