How to Create Dropdown Submenus in Bootstrap After the Removal of `dropdown-submenu`?

Bootstrap Dropdown Submenu Functionality Removed

In Bootstrap 3, the dropdown-submenu class has been eliminated. This class provided a clean way to create nested submenus under a main dropdown. However, Bootstrap's creators decided that submenus had become obsolete, especially in mobile environments.

Alternative Options for Submenu Functionality

CSS-Only Methods:

For Bootstrap 5, you can use JavaScript or CSS to achieve submenu functionality:

CSS-Only Navbar Submenu on Hover

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

CSS-Only Navbar Submenu on Hover (Right Aligned)

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

JavaScript Method for Bootstrap 5:

Beyond the CSS-only options, you can also implement submenu functionality in Bootstrap 5 with some JavaScript:

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';
    })
});

CSS Method for Bootstrap 3:

Despite the removal of the dropdown-submenu class, you can still implement submenu functionality in Bootstrap 3 with CSS:

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

Conclusion

While specific submenu classes are no longer available, there are several alternative approaches you can use to create dropdown submenus in Bootstrap, depending on your needs and the version you're using.

The above is the detailed content of How to Create Dropdown Submenus in Bootstrap After the Removal of `dropdown-submenu`?. For more information, please follow other related articles on the PHP Chinese website!