How to Create Multilevel Dropdowns in Bootstrap 4?

Multilevel Dropdown Navigation with Bootstrap 4

Creating multilevel dropdowns in Bootstrap 4 can be achieved with minimal CSS and JavaScript modifications. Here's how you can do it:

1. HTML Structure

Ensure that your navigation contains nested

and

elements as follows:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  ...
  <div class="collapse navbar-collapse">

2. CSS Styling

Add the following CSS to your stylesheet:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

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

3. JavaScript

Finally, add the following JavaScript:

$('.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');


  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass('show');
  });


  return false;
});

Demonstration

This approach enables you to create complex multilevel dropdowns seamlessly integrated into your Bootstrap 4 navigation. It ensures that only one sub-menu is open at a time, preventing overlaps or nesting conflicts.

The above is the detailed content of How to Create Multilevel Dropdowns in Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css bootstrap html ul

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn