How To Add Dropdown Submenus To Bootstrap?

CSS-based Solution for Bootstrap 5

To add dropdown submenus in Bootstrap 5, you can use custom CSS. This method focuses on positioning the submenus and adding hover effects for menu items.

Here's a CSS example for submenu positioning:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

This CSS positions the submenu to the right of its parent menu item. To add hover effects, include the following:

.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

This CSS displays the submenu when the parent menu item is hovered over.

@media (max-width: 768px) {
  .dropdown-submenu .dropdown-menu {
    left: 0;
    top: 100%;
  }
}

JavaScript-enhanced Approach

For more control over submenu behavior, you can use JavaScript. This method helps prevent submenu closure and adds toggle display functionality.

Here's a JavaScript example:

let dropdowns = document.querySelectorAll('.dropdown-toggle')
dropdowns.forEach((dd) => {
  dd.addEventListener('click', function (e) {
    var el = this.nextElementSibling
    el.style.display = el.style.display === 'block' ? 'none' : 'block'
  })
})

This script prevents the submenu from closing when the parent dropdown is open. It toggles the display of the submenu between 'block' and 'none' when clicked.

CSS-only Navbar Dropdown Submenus

You can create navbar dropdown submenus without JavaScript. This method uses CSS to style nested dropdown menus and activate submenus on hover.

To style nested dropdown menus, use this CSS:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

This CSS places the submenu to the right of its parent menu item, creating a nested look.

To activate submenus on hover, add this CSS:

.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

This CSS rule shows the submenu when you hover over the parent menu item, creating a smooth navigation experience.

Bootstrap 4 Submenu Implementation

Bootstrap 4 needs CSS changes to add dropdown submenus. Here's a CSS example for Bootstrap 4:

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

This CSS places the submenu to the right of its parent and shows it on hover.

For click-based submenu options, you can use this JavaScript function:

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');
  return false;
});

This script toggles the 'show' class on the submenu when clicked, allowing click-based navigation.

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <!-- Dropdown items here -->
  </div>
</li>

Bootstrap 3 Legacy Support

For Bootstrap 3, you need custom CSS to create dropdown submenus. Here's an example:

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

This CSS places the submenu and shows it on hover.

The HTML structure for nested dropdowns in Bootstrap 3 looks like this:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Submenu</a>
            <ul class="dropdown-menu">
                <li><a href="#">Submenu item 1</a></li>
                <li><a href="#">Submenu item 2</a></li>
            </ul>
        </li>
    </ul>
</li>

This structure creates a dropdown with a nested submenu, allowing multi-level navigation in Bootstrap 3.