Working Dropdown menu in the newest version of Bootstrap?

Question

I'm developing a website that needs a dropdown menu within a dropdown menu but apparently in bootstrap 5.0 they removed that functionality? I've heard there are still ways to get sub-menus but all of the methods that I have tried didn't work, please help!

This is the ultimate solution for Bootstrap 5: https://github.com/dallaslu/bootstrap-5-multi-level-dropdown — justadeveloper, Jul 01 '22 at 11:27

score 1 · Answer 1 · answered Jun 20 '21 at 03:23

This is the clean way to implement this!

(function($bs) {
        const CLASS_NAME = 'has-child-dropdown-show';
    $bs.Dropdown.prototype.toggle = function(_orginal) {
        return function() {
            document.querySelectorAll('.' + CLASS_NAME).forEach(function(e) {
                e.classList.remove(CLASS_NAME);
            });
            let dd = this._element.closest('.dropdown').parentNode.closest('.dropdown');
            for (; dd && dd !== document; dd = dd.parentNode.closest('.dropdown')) {
                dd.classList.add(CLASS_NAME);
            }
            return _orginal.call(this);
        }
    }($bs.Dropdown.prototype.toggle);

    document.querySelectorAll('.dropdown').forEach(function(dd) {
        dd.addEventListener('hide.bs.dropdown', function(e) {
            if (this.classList.contains(CLASS_NAME)) {
                this.classList.remove(CLASS_NAME);
                e.preventDefault();
            }
            if(e.clickEvent && e.clickEvent.composedPath().some(el=>el.classList && el.classList.contains('dropdown-toggle'))){
                e.preventDefault();
            }
            e.stopPropagation(); // do not need pop in multi level mode
        });
    });

    // for hover
    function getDropdown(element) {
        return $bs.Dropdown.getInstance(element) || new $bs.Dropdown(element);
    }

    document.querySelectorAll('.dropdown-hover, .dropdown-hover-all .dropdown').forEach(function(dd) {
        dd.addEventListener('mouseenter', function(e) {
            let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');
            if (!toggle.classList.contains('show')) {
                getDropdown(toggle).toggle();
            }
        });
        dd.addEventListener('mouseleave', function(e) {
            let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');
            if (toggle.classList.contains('show')) {
                getDropdown(toggle).toggle();
            }
        });
    });
})(bootstrap);

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
    <!-- Begin SEO tag -->
    <title>Infinite Multiple Level Dropdown Menu base on Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <style>.dropdown-hover-all .dropdown-menu, .dropdown-hover > .dropdown-menu.dropend { margin-left:-1px !important }</style>
</head>

<body class="">
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Demo <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item dropdown dropdown-hover">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Hover</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown01">
                        <a class="dropdown-item" href="#">Single App</a>
                        <a class="dropdown-item" href="#">Multiple Works</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Disctribution</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Documents</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown02">
                        <a class="dropdown-item" href="#">Introduction</a>
                        <div class="dropdown dropend">
                            <a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Layouts</a>
                            <div class="dropdown-menu" aria-labelledby="dropdown-layouts">
                                <a class="dropdown-item" href="#">Basic</a>
                                <a class="dropdown-item" href="#">Compact Aside</a>
                                <div class="dropdown-divider"></div>
                                <div class="dropdown dropend">
                                    <a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Custom</a>
                                    <div class="dropdown-menu" aria-labelledby="dropdown-layouts">
                                        <a class="dropdown-item" href="#">Fullscreen</a>
                                        <a class="dropdown-item" href="#">Empty</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Magic</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="https://github.com/dallaslu/bootstrap-5-multi-level-dropdown">View on Github</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container" style="padding-top: 3.5rem">
        <div class="dropdown mt-3">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown button
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <div class="dropdown dropend">
                    <a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Layouts</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown-layouts">
                        <a class="dropdown-item" href="#">Basic</a>
                        <a class="dropdown-item" href="#">Compact Aside</a>
                        <div class="dropdown-divider"></div>
                        <div class="dropdown dropend">
                            <a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Custom</a>
                            <div class="dropdown-menu" aria-labelledby="dropdown-layouts">
                                <a class="dropdown-item" href="#">Fullscreen</a>
                                <a class="dropdown-item" href="#">Empty</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Magic</a>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </div>
        <div class="d-flex dropdown-hover-all">
          <div class="dropdown mt-3">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton222" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown Hover
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton222">
                  <a class="dropdown-item" href="#">Action</a>
                  <div class="dropdown dropend">
                      <a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Layouts</a>
                      <div class="dropdown-menu" aria-labelledby="dropdown-layouts">
                          <a class="dropdown-item" href="#">Basic</a>
                          <a class="dropdown-item" href="#">Compact Aside</a>
                          <div class="dropdown-divider"></div>
                          <div class="dropdown dropend">
                              <a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Custom</a>
                              <div class="dropdown-menu" aria-labelledby="dropdown-layouts">
                                  <a class="dropdown-item" href="#">Fullscreen</a>
                                  <a class="dropdown-item" href="#">Empty</a>
                                  <div class="dropdown-divider"></div>
                                  <a class="dropdown-item" href="#">Magic</a>
                              </div>
                          </div>
                      </div>
                  </div>
                  <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

</body>

</html>

Also, keep in mind that hover functionality will not work on mobile devices. Now you can choose best scenario for yourself!

This works out well, except for the one issue where if there are two buttons, in the same drop down, that trigger their own dropdowns (submenus), you have to click on each button twice to open an close it. Clicking on one button doesn't close the other submenu if its open. — AGS, Jun 14 '22 at 15:36

Working Dropdown menu in the newest version of Bootstrap?

1 Answers1