Multi Level Dropdown menu

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/

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

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

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

@mdo

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

#21026 (comment)

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.

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.

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.

@FireController1847

@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.

@mdo

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

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/

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.

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.

Once the below issue is completed.... (and v5 full released, i'm assuming)
#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.

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

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

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

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

This would be an great addition to have 👍

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

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

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

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.

@aaronjchristian

@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?

@JPustkuchen

@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 :)

I just tested it, and it do works for mouse. But the keyboard navigation fails to reach any item after the submenu button, as the keyboard focus is blocked at the end of the sublevel menu.

The solution would be to modify this line

bootstrap/js/src/dropdown.js

Line 60 in 0f13e1c

    
           const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'

So the keyboard navigation only stays in current menu, and does not jump automatically to the submenu.
But I'm not sure how to modify that CSS selector to do that

So the arrow issue is actually on this line:

bootstrap/js/src/dropdown.js

Line 423 in 0f13e1c

instance.show()

Because the arrow down key always opens the sub menu, and moves the focus on the first sub menu item.
To fix that I'm doing a check to only call the show() function if it's not a sub menu.

Navigation Menu

Repository navigation

Multi Level Dropdown menu #27659

14 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Multi Level Dropdown menu #27659

Description

Activity

Johann-S commented on Nov 13, 2018

XhmikosR commented on Nov 13, 2018

rafalp commented on Nov 13, 2018

FireController1847 commented on Nov 16, 2018

Joyrex commented on Nov 19, 2018

FireController1847 commented on Nov 21, 2018

mdo commented on Nov 26, 2018

patulacci commented on Dec 17, 2018

Kout commented on Dec 18, 2018

AlexanderSk commented on Feb 19, 2020

mdo commented on Aug 17, 2020

14 remaining items

whizzsfe commented on Apr 19, 2021

whizzsfe commented on Jun 10, 2021

devhoussam commented on Jul 3, 2021

veks commented on May 20, 2022

jimmywarting commented on Aug 4, 2022

achiverram28 commented on Aug 25, 2022

aaronjchristian commented on Apr 11, 2023

AgentSmith0 commented on Apr 12, 2023

aaronjchristian commented on Apr 12, 2023

JPustkuchen commented on Jan 12, 2024

aaronjchristian commented on Jan 16, 2024

ferllings commented on Feb 13, 2025

ferllings commented on Feb 28, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions