jQuery Plugin for Bootstrap Navbar With Multiple Dropdowns | Twitter BS4 Responsive Navbar

Installation:

# Yarn
$ yarn add bootstrap-navbar-dropdowns
# NPM
$ npm install bootstrap-navbar-dropdowns --save

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

<!-- 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>
<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-has="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 executed it. You can add as many child dropdown menus.

$('.navbar').navbarDropdown({
  // bs3 | bs4 | bs5
  theme: 'bs4', 
  // click | mouseover
  trigger: 'click',
  // override the default selector of the dropdown
  dropdownSelector: null
});

Options

• Bootstrap 3

  • Example
  • CodePen

• Bootstrap 4

  • Example
  • CodePen

• Bootstrap 5

  • Example
  • CodePen

See Demo And Download