Multi Level Dropdown menu

[ayoubkhan558-zz]

Multi drop-down must be created in bootstrap because we have to use another plugin for this. Here are some screenshots of what i looking for.

https://codepen.io/SurajVerma/pen/wBMbqL https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h https://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/

[Johann-S]

I don't think we plan on adding that feature 🤔

/CC @twbs/css-review @twbs/js-review

[XhmikosR]

Not sure how much code this will need. If not a lot, I see the use case for this.

[rafalp]

This comes up once in a while, but seems that @mdo's opinion is "nope, those are crap on mobile":

https://github.com/twbs/bootstrap/issues/21026#issuecomment-314134412

[FireController1847]

I still strongly believe his comment is completely invalid and has no evidence backing it up, and the replies seem to show large community support for this feature. It would be easy to implement as well, since it'd basically be repeating a dropdown over and over.

[Joyrex]

I agree that on mobile (portrait or landscape) they really don't work well since there's not enough horizontal and vertical screen real estate to effectively support the functionality in a real-world case.

[FireController1847]

Almost every other design disagrees with your logic. You can easily create a drop-down menu by using a sidebar. There are so many examples of this in almost every app.

[mdo]

@FireController1847 Read the comment again—there were multiple issues with nesting dropdowns at the time while developing and maintaining v3. You can look at it now and say it’s all invalid or inaccurate, and that’s fine—v3 shipped over five years ago.

The problems we ran into were around keyboard navigation, screen reader support, finding an elegant and scalable responsive approach, providing native desktop grade dropdowns (where diagonal cursor moving wouldn’t toggle the menu), and at the time, I recall the JS being overly complex (could be implementation issues or just general problems with the component). Are all those issues solvable? Yes. Did we want to solve them all ourselves and maintain something we found undesirable or difficult? No, not at the time.

All that to say, if it were so easy to do, feel free to submit a PR. Otherwise, use this space to brainstorm ideas for building them, making them mobile-first and responsive, and for anything that previous iterations lacked or could do better.

Opinions can change over five years and I’ve gladly revisited past decisions like this when asked.

[patulacci]

Hi,

Thank you @mdo for your argumented answer (which makes sense from my point of view).

For those like me who do not have mobile responsive problem (my users use desktop only), I implemented the solution provided by @ayoubkhan558 which works like a charm on desktop screens, with few lines of code : https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

[Kout]

One possible soultion is to rebuild the multilevel navigation for mobile into stacked one. One (bit outdated, supports even IE8) apporoach here: Pine.js. For me the direction to go.

We use it still on production (originally we needed IE8 support): https://www.lentiamo.co.uk/

[AlexanderSk]

Hello, i would like to note that in the setup: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h there is a bug with keyboard arrows navigation. In most cases in 2nd level menu when a user presses down arrow button the menu closes after the first menu item. 1+ for proper support for these menus as they are really useful in some cases.

[mdo]

Adding the help wanted label here. Generally speaking, I'd love to restore support for nested dropdowns, but with proper accessibility, keyboard navigation, etc. If folks can chip in a bit via PRs, I'm sure we could ship something for v5 and possibly a v4.x depending on implementation.

[Anisha2510]

https://mdbootstrap.com/snippets/jquery/mdbootstrap/949080#html-tab-view

[zolyyy]

Does anyone have a working code for Bootstrap 5?

[thednp]

@zolyyy Bootstrap 5 rely even more on Popper and styles afaik.

I think nested dropdown is the feature that cannot be implemented easily with Popper, might be the real reason why is missing.

If you want something compatible with Bootstrap, give Navbar a try.

[januwA]

I used the following method to achieve a multi-level menu, but there is a little problem

          <div class="dropdown">

            <a class="btn dropdown-toggle"> Dropdown link </a>
            <ul class="dropdown-menu">
              <div class="dropdown-item">

                <a class="btn dropdown-toggle"> Dropdown link </a>
                <ul class="dropdown-menu">
                  <div class="dropdown-item">

                    <a class="btn dropdown-toggle"> Dropdown link </a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item">Action</a></li>
                      <li><a class="dropdown-item">Another action</a></li>
                      <li>
                        <a class="dropdown-item">Something else here</a>
                      </li>
                    </ul>
                  </div>
                </ul>
              </div>
            </ul>
          </div>

    document.querySelectorAll('.dropdown .dropdown-toggle').forEach((a) => {
      let dropdown: bootstrap.Dropdown;
      a.addEventListener('click', (e) => {
        const show = a.classList.contains('show')
        if (show) {
          a.classList.remove('show')
          dropdown.hide();
        } else {
          a.setAttribute('data-bs-toggle', 'dropdown');
          dropdown.show();
          a.removeAttribute('data-bs-toggle');
        }

        e.preventDefault();
        e.stopPropagation();
      });
      dropdown = new bootstrap.Dropdown(a);
    });

A strange background color appears when I click it, can someone help me solve it

[januwA]

With this css code, the strange background color disappeared

.dropdown-item:active {
  background-color: inherit;
}

[gsteri1]

@januwA I had a multilevel boostrap navbar working. It would work, but on some of the "pages" of my application the callback to bootstrap when a dropdown-item got clicked was lost. I am sure there is some interaction with some other widget I am using. The funny thing is that the problem manifest itself in the simplest pages-ones with minimal extra JS widgets/code. Your code to attach the listener helped a great deal. The navbar works across at least three levels. Thank you!

[ali-dev-code]

yes! exactly we need this

[ayoubkhan558-zz]

@zolyyy I found this https://codepen.io/typo3-freelancer/pen/poEvyGj?editors=1010

[ayoubkhan558-zz]

Here I found Bootstrap 4 multi level dropdown in navbar https://codepen.io/marktempelaere/pen/OOjeOj

[whizzsfe]

attempted this with v5 beta3. it would work if the top level dropdown could be told to remain open.

https://codepen.io/whizzsfe/pen/mdRWVXy

[whizzsfe]

edited previous link! correct link below for reference!

https://codepen.io/whizzsfe/pen/mdRWVXy

[zolyyy]

edited previous link! correct link below for reference!

https://codepen.io/whizzsfe/pen/mdRWVXy

this not working for me...

[whizzsfe]

correct! it doesn't. if the first dropdown would remain open, it would work.

[zolyyy]

@zolyyy I found this https://codepen.io/typo3-freelancer/pen/poEvyGj?editors=1010

this very good, but working only with alpha3 not with beta3...

css change this need add .dropdown-menu-left { right: auto; left: 0 }

.dropdown-menu-right { right: 0; left: auto }

but the js solution not found... maybe data- changed to data-bs- but i not found now the solution

[whizzsfe]

Once the below issue is completed.... (and v5 full released, i'm assuming) https://github.com/twbs/bootstrap/issues/32723

Then it is possible to create this in v5. This is done by preventing the clicks inside the dropdown from closing it. This would only work for links that move off of the page. Otherwise a javascript trigger could be used to 'dispose()' the menu.

See my codepen below for basic functional version.

https://codepen.io/whizzsfe/pen/KKaxrzo

Please note that the Bootstrap js and css are copied across to codepen as the issue has not been merged or released yet.

[whizzsfe]

Now that 5.0.1 is released, please see below codepen which uses it.

https://codepen.io/whizzsfe/pen/oNZPqQy

[devhoussam]

I made this Navbar example with Nested Dropdowns (Submenu, Multilevel, Megamenu) there are some issues it can be fixed but it will be helpful to all bootstrap users.

https://codepen.io/themes4all/full/abWvBwE

[veks]

here is an example menu https://wordpress.isvek.ru/

[jimmywarting]

This would be an great addition to have 👍

[achiverram28]

I found this issue on https://ovio.org/projects and would love to contribute!

[aaronjchristian]

https://codepen.io/typo3-freelancer/pen/poEvyGj?editors=1010 is working well for me with Bootstrap 5.2+

[AgentSmith0]

Would be nice to have as an example in the docs.

[aaronjchristian]

Would be nice to have as an example in the docs.

It looks like the main thing that is missing is the bs-data-auto-close="outside" data attribute. Once you add this to the default navbar demo from the docs, you get multi-level dropdowns working properly.

[JPustkuchen]

@aaronjchristian could you perhaps clarify this and provide a full example? It sounds like you're saying multi-level navigation works out of the box by simply adding this attribute, but what's the full structure? Or did I get your comment wrong?

Edit: This seems to work quite well! Perhaps adding the important parts to the docs would already help a lot? https://codepen.io/typo3-freelancer/pen/poEvyGj?editors=1010

Is this what you meant?

[aaronjchristian]

@JPustkuchen glad you got it sorted out. Yep thats exactly what I was getting after. It also took me awhile to piece this one together but glad it works OOTB, I can finally scrap all my custom JS solutions :)