Bootstrap 4 Navbar with Dropdown and sub-dropdown

[alainalexa]

It appears like "ul" listing is dropped out from dropdown items ( See Bootstrap 4 alpha version).
"ul" listing would be a great feature to have especially when the dropdown needs to be extended and to have sub-dropdowns.
Here attached are:

• A screenshot of a navbar with dropdown and sub-dropdowns
• HTML code with additional CSS
  bootstrap4-nabvar-menu.txt
  

[hebbet]

See #16387#issuecomment-97153831

[mdo]

Nested dropdowns aren't supported and haven't been since v3.

[akostadinov]

@mdo , could you explain why nested dropdowns are so bad?

The only issue with multi-level menus I see when searching about it is that hover is not possible on mobile. IMO this can be simply resolved by also expanding on click, not only hover. Best of both worlds.

Single-level menus are IMO crap for navigation. I hate when i have to click multiple times to reach some part of the web site.

[Siri15]

@alainalexa
The code in the attachment works as static and non responsive , sub menu items should be shown on the click on menu item but on the page loading itself the entire snap as shown is loaded, but not on the click of menu items, and its not even collapsible.
I am using bootstrap 4 for angular 4 application, and needed a help in developing menus with sub-menus till level of 3.

[akash-mitra]

@mdo I am sure you have your reasons for not having nested clickable dropdowns, and while I respect that, for a large content management sites, not having the basic ability to nest a list in navigation bar is going to be pretty useless.

[mdo]

I made the decision over three years ago, and it hasn't stopped anyone from building anything :).

[akostadinov]

@mdo , question was whether the feature is good for the project and why (not). Ideally decisions in an FLOSS project are driven (and when needed reconsidered) based on user input, feature usefulness, development feasibility, etc. I think many people like me are having the point of view that multi-level menus are very useful thus interested in why the decision was made.

Of course project owner is not in any way obligated to follow any rules and I know how frustrating it is to receive demands especially from non-paying clueless users. To give a concise rationale though is good, in my opinion, for the overall health of the project community.

[akash-mitra]

It might not have stopped anyone from building anything in last 3 years, but it did worse. It made people write bad crappy hacks to make that possible. Please think about it. You are anyway allowing dropdowns on navbars. But you are not allowing nested <ul> tag there. That's often producing semantically incorrect markup.

[mdo]

My point was that I had these same conversations three years ago. Find the v3 PR and you'll see the comments. I believe there were other issues, too. We stopped doing it because it's a bad idea for mobile and the JS to do it right on desktop didn't feel worth it.

[akostadinov]

I found #6342. Search for "submenu" to find related posts.

What I see there basically comes down to "submenus are shit on mobile". Is this still the case? I think mobile moved somehow since then (screen size, etc.). One person there gave examples for using submenus on iStuff.

One question unanswered for me is why click to expand dropdowns are bad on mobile? Another interesting question is what observation people since submenus were dropped.

I only know that navigating through a big site without submenus requires far more waiting time, to wait new page to open, see available links, click new link and then go to new page to again check links, click again and wait. With submenus, you can much faster reach what you want.

What kind of data would actually be useful to have this feature reconsidered for inclusion in Bootstrap?

[DontPlayTheGame]

Still sticking to a comment from 2012 seems to me a bit narrow minded. The world has changed since, more than a bit.
I have to work from time to time with leading desing agencies, and they do desiging submenues. "submenus are shit on mobile" is not an argument for them to not desing some, if they think it is suitable and usable for the content.

Just use google/stackoverflow for "boostrap submenue" or "boostrap subnavigation" instead of counting pull requests.

@akostadinov "question is what observation people since submenus were dropped"
ppl then use to write own code to add submenu capability and that for two very simple reasons:

1. mobile is - no doubt - part of the world. but not the whole word!
2. mobile has changed too and now as ppl using phablet/tablet they are asking for submenues instead of clicking through. (to be correct: they are asking for something else than clicking and just waiting for a page and clicking and wating and .... )

Privately i'm using bootstrap for my own projects, but at work we kicked it out a couple of years ago, because it don't fit our needs, neither for mobile nor for desktop.

Just my 2 cents.

[Ranamiu]

100% agree with last comments !

Pull requests are poor indicators, people switch to other frameworks, they just stop using BootStrap!

They will not say to you.

Exactly ! Just use google/stackoverflow for "boostrap submenue" or "boostrap subnavigation" ..

We need them back.

Sub-dropdown are all arround, nowadays I do not see any usability issue.

I do see a big usability issue not giving us the "option" to choose: Sub-dropdown yes or not depending on any web project.

Thank you for your attention.

[Nodws]

We keep hacking bootstrap to use nested submenus for our clients while these people sit on their high chairs

[guero64]

I'm still kind of stunned by "I made the decision over three years ago, and it hasn't stopped anyone from building anything". "We didn't really see a demand for it from developers" would have been more understandable.

Can anyone point me to a hacked solution that works well with Bootstrap 4?

[juergenr]

Today I wasted some hours exploring, why submenus are not working.
I did not get the idea, that they could be removed on purpose.
In my opinion, they are pretty important in almost every somewhat larger business web application and I don't want to miss them on mobile either.
So please put into bootstrap an adequate replacement - Thanks!

[papaiatis]

I know that Bootstrap is a "responsive, mobile-first front-end component library".
However I'm making more intranet websites for PC users than general mobile friendly websites. I like using Bootstrap as it makes my UI work easier but unfortunately I keep hitting walls when trying to accomplish easy-to-seem things like the mentioned sub-dropdowns. I don't care about sub-dropdowns are looking bad on mobile. I don't make this intranet website for mobile users. Should I leave Bootstrap because it only focuses on mobile? Shouldn't Bootstrap support those nasty sub dropdowns and just let the developers know that they look bad on mobile? How about letting them decide on whether they want an ugly sub-dropdown or not? I need them. I don't want to write hacky code. I need Bootstrap to support sub dropdowns. Period.

[ajpiano]

I made the decision over three years ago, and it hasn't stopped anyone from building anything :).

It may not have stopped anyone from building anything, but it's stopping them from doing it with Bootstrap.

I came back to Bootstrap to try out v4 in the day or so to protoype a rewrite of a big app that uses a bit of 2.3.1 - primarily for the navbar in specific mini-apps, where there were only nav items with children. Our top-level system menu is being transitioned from the classic dmenu.js that many folks may remember. I figured I'd use Bootstrap to replace that menu, but it has 2 and very rarely 3 levels of nesting. I got the sense that nested dropdowns were not supported from the documentation, but I also figured they'd be relatively implementable as a simple extension or just by creatively applying the framework.

So I went down the path and got a bit of the way there, figuring I could just nest dropdown-toggle and dropdown-menu elements. (Here's the codepen if you want to follow along). Unfortunately, things weren't working as I was expecting - regardless of which nested menu was clicked, the first nested dropdown would be shown. I could see other sticky situations coming up too, e.g., dealing with keeping the "parent" menu open as you switch between activating submenus, et. Eyeballing the issue made me suspect something in how the association is made with a dropdown on https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js#L341-L349, but I wanted to see if anyone else had further insight or a recommended pattern. So I put the aforementioned codepen together and tried to find some help via IRC and Slack and then found my way here.

Instead of a fix or even recommendation, I am instead at an inflection point. As an experienced, long-time user of front-end open source libraries I know I have a few choices

1. Start digging in to debug what's going on in dropdown.js. I can use that knowledge to either develop my own workarounds and eventually a custom implementation for my nested submenus in Bootstrap, which I get to maintain forever and no one else outside my organization can help me with. (Blech). OR - I can use that information to try to formulate and share a fix upstream. Given what I now know about the situation, however, my assumption is that anything related to support for nested dropdowns wouldn't be considered a "bug," and that I'd be fighting an uphill battle against the project's clearly-stated preference around this feature. (Also blech)

2. Fundamentally re-think the UX here so that it works differently and conforms to the maintainers' preferences around what constitutes "mobile-first." So far as I can tell, this would be an issue even if I weren't using the navbar - even if I was just trying to nest one dropdown inside of another. This may prove to be a great idea! However, it is a strange UX consideration to have forced upon you by your frontend framework. As others have pointed out, people use Bootstrap for apps that primarily or exclusively serve folks on desktop - even as they intentionally reap the rewards of the built in responsiveness, etc., of other "mobile-facing" features. It seems strange to tell these users, "If you want to use Bootstrap, you're not allowed to ever have something pop out of something else that has popped up." it is not as if nested drop down menus are some sort of oddball or "new trendy fad" UI feature.

3. Try Foundation. They support nested dropdowns and it just works, AFAICT.

Ultimately, I think I'm gonna go with #3. I'm only a day or two into prototyping and hey, that's what I am supposed to be doing right now. Not becoming a long-term stakeholder of a particular dropdown menu implementation either in the Open Source community or within my organization (and creating a bunch of technical debt right out of the box) (Choice 1). Not fundamentally redesigning something that basically works (Choice 2).

I know that it is not the goal of any open source project or its maintainers to "win" as many users as possible or to serve every particular need, and in the case of nested dropdowns, Bootstrap's maintainers very well may be making the correct and strategic decision in terms of avoiding future headaches, etc. associated with this functionality. At the same time, it is certain that we are not talking about such an unboundedly complex problem that it could not be solved (rather expediently and comprehensively) if the decision were to be reversed.

What's most frustrating about the decision as it currently stands is that there appear to be bugs in the current implementation that stand in the way of users extending Bootstrap to solve this problem for themselves, and if those bugs are reported, they will not be considered bugs, because "nested dropdowns aren't supported" based on five-year-old reasoning that "submenus just don't have much of a place on the web right now" and more recent reasoning that "the JS to do it right on desktop didn't feel worth it."

Worth it how? The initial effort? Bytes? Bugs? Surely sharing an understanding of that calculus and whether it is still timely would be a more worthy way of considering this issue than "we decided five years ago that anyone who ever needs this is wrong."

[akostadinov]

Excuse me for posting commercial links, but I just stumbled upon this web site that is responsive and has sub-menus working great on mobile:
http://www.sportdepot.bg/en

If you click on the kebab menu button in the upper-left part of the page, you can see how nicely multi-level navigation can work on mobile.

Basically the menu and sub-menus expand on tap. The sub-levels of menus show up on top of the upper-level menus. There is a x button to close menu.

[FireController1847]

@mdo This is insane for not listening to the community whatsoever. Three years ago people were saying it's a bad idea, and now you're hearing the other side. Why is this still not supported?

[fabiofl]

People. OpenSource software isn't like Subway for you demand certain fillings and features. Make your own sandwich (if possible be cool and share it). Peace.

[ajpiano]

Dreadfully inaccurate analogy @fabiofl. Especially when the sandwich actively prevents you from Having It Your Way (i.e., issues in code that stand in the way of users implementing nested dropdowns themselves).

If you really want to torture the Subway analogy, this situation seems more akin to walking into a Subway sandwich shop, ordering an Italian BMT, and the Sandwich Artist refuses to make it because he doesn't like Genoa Salami.

Or, if we really want to torture the Subway analogy (again, this was your idea, not mine), it seems more like going in, ordering a Sweet Onion Chicken Teriyaki Foot Long, and having your Sandwich Artist tell you, "Sorry, I don't think Sweet Onion Chicken Teriyaki tastes good on a six-Inch sub" and refusing to make you the foot-long sandwich.

[fabiofl]

@ajpiano Thanks for your response. I get your point of view. But for me the main idea is, as @mdo said, "it hasn't stopped anyone from building anything".

We are developers. We are "Sandwich Artists" too.

If you don't have a tool, build it. Every project borns out of necessity.

My point is that everyone is more and more getting used to ask more for "just-add-water" solutions nowadays.

If the core team of a project decided something is not priority, roll with the punches and DIY.

[ajpiano]

It has stopped and does stop people from building things, that was my point in the first post I wrote in this thread. AFAICT, the current dropdown menu code stands in the way of users implementing their own nested dropdown menus. I have still not gotten a straight answer about whether this is considered a bug.

[fabiofl]

It's beta software. Expect bugs. It's also free, provided "as is" without warranty of any kind (people don't read licenses). If you decide to use it, you should own your own technical debts.

I'll stop arguing since I think this discussion isn't getting anywhere.

I stated my point of view. Thanks again for showing yours.

[ajpiano]

@fabiofl I appreciate you bringing up these points as well and please accept my apologies for my using you as vector for trying to make these points to the project maintainers and other folks who come across this discussion - a discussion that is not and has never been about the first-principles of open source licenses.

Just for posterity, the point is not "expect bugs," obviously I expect bugs when using new and beta software. The question is whether those "bugs" will truly be considered bugs if they are only manifested when a user is trying to build an extension that implements functionality that the framework does not want to support.

Your mention of technical debt serves to make the point I've been trying to make as well. The exact reason someone wouldn't want to "DIY" and "roll with the punches" is that rolling your own implementation of Feature X based on Framework Y, when Framework Y explicitly does not support feature Feature X is the type of decision that saddles a project with technical debt.

[akash-mitra]

"Make your own sandwich"
-Sure. But the framework is getting in the way and preventing us doing that because it does not support, for example, a nested <ul> tag as dropdown.

"It's beta software. Expect bugs."
-Sure. But for that to happen project maintainer needs to accept this as a bug.

[brendanw]

https://codepen.io/svnt/pen/beEgre

This hack appears to be working ok.

[Ataurr]

This is support multi drop-down menu https://github.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar

[lluchez]

You can use the following styles:

ul.dropdown-menu {
  .dropdown-menu {
    top: 0;
    left: 100%;
  }
  span.caret {
    position: absolute;
    top: 10px;
    right: 5px;
    border-left: 4px dashed;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
}

And I'm using the following to generate my menu items:

  renderItem(item, i) {
    const { name, value, items } = item
    if( !items || !items.length  )
      return (<NavItem key={i} href={value}>{name}</NavItem>)
    return (
      <NavDropdown key={i} title={name} id={this.generateID(name)}>
        {items.map( (sub_item, j) => this.renderItem(sub_item, j) )}
      </NavDropdown>
    )
  }

[kitsguru]

Although this solution is for v3.3.7, it shows how bootstrap can be extended. For a few bucks for the licence I find it invaluable.

http://meganavbar.com/

I hope the author modifies it for V4

[geoffbeaumont]

@Ataurr - nice spot. https://github.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar demonstrates just how easy it would be to support multi-level dropdowns in Bootstrap 4. And how nicely they can work on mobile as well as desktop...

[adpace]

I am responsible for the front end of a global multi-billion dollar company. We also use nested menus as there is a lot of content in our navigation. We can certainly write our own solution, but I always try to use standard bootstrap methodologies so new developers can step in and get to work without having to figure out the custom logic. I would agree that it's a "miss" that bootstrap no longer supports nested menus. There is still a valid need for them that is not being met.

[kamov]

Very bad that bootstrap don't support multilevel dropdown. All solution that I found have their issues.

I think that will remove bootstrap dropdown and replace with Semantic UI dropdown, https://semantic-ui.com/modules/dropdown.html

You guys can check into and implement similar way as they do.

Their dropdown can even replace select2 how powerful is.

[udf2457]

You know. This is the dumbest missed feature ever, and a lame excuse of "we decided 3 years ago it was too difficult and that's that". Never mind the fact that web technologies have changed A LOT since 3 years ago. Never mind the fact that Bootstrap 4 presented an ideal opportunity to introduce sub-menus as a core feature, not something you have to hack together yourself or find some random third-party hacks.

There are so many genuine use-cases for why sub-menus are a much needed core feature. One example could be a "past events" feature:

• Past Events
  --Number One
  ----About Number One
  ----etc.
  --Number Two
  ----About Number Two
  ----etc.

Lets say I have 15 past events.... expecting me to list them all in one single level giant menu is just dumb as anything.

I will never use Bootstrap again for any of my projects.

[cyoung502]

How do you say multi-level dropdowns are a bad UX design? For large sites that have hundreds of pages, having dropdowns is the only logical way for a user to see all content from the home screen. Bootstrap offers no solutions for this. Please just add support, it's stupid how many basic logical features have to be hacked into Bootstrap.

[createdwithlove]

@mdo nested dropdowns are not evil, even if you do not really need them
@udf2457: If you do not have the skills to extend the bootstrap the way you want it, you should learn how css works and not scold the developers

[udf2457]

@createdwithlove

First, why are you picking on me ? If you care to read this thread you will see I was NOT the first and I almost certainly WILL NOT be the last person to comment on this issue.

Secondly, I might agree with your sentiment if the issue was something debatable. But this one is not, it is a bizarre and poorly thought through design decision by the developers, and when prompted for their reasoning, the best they could come up with "well, we decided five years ago its was too difficult and that's that".

P.S. Don't @createdwithlove bother replying. I've blocked you.

[juanlet]

You need to give the option to the developer to be able to use multi-level dropdowns if he wishes so. I think it´s unwise for the future of the framework to remove such a basic feature, be smart!!

[ravenshill]

For what its worth, I'd like to place another me too on this feature. I have invested in learning BS I'd like to continue to use it for all my projects. However, the lack of this feature is a big hole. I hope you can reconsider your thinking on this.

Being intransigent will cause developers to use other frameworks.

[douglasg14b]

Almost 2019
No multi-level dropdowns

Can't believe this is still an argument. I've used and made multilevel dropdowns for TONS of things. Want to select anything that's categorized with items? Multilevel dropdown is the easiest solution.

[udf2457]

Being intransigent will cause developers to use other frameworks.

Yup. My company has already moved away from Bootstrap because of the lack of multi-level dropdown support. We've been using other frameworks on a number of major projects and we do not miss Bootstrap one bit.

Our developers have better things to do with their time than implement (and subsequently maintain) hacky workarounds for stuff like multi-level dropdowns that should be part of the core framework. Nor should we be forced to import some hacks coded by a third-party for something as basic as multi-level dropdowns.

Why force people to re-invent the wheel ? Multi-level dropdowns is not a wheel that anyone should be wasting their time reinventing in the 21st century.

[naknak987]

I came here looking for a BS4 multi-level dropdown solution. I'm shocked to find that its not a feature of the framework. I hope the BS developers will reconsider adding multi-level dropdowns as a feature to the framework. I may look into switching to a different framework instead. @udf2457 What framework are your developers using in place of BS?

[udf2457]

@naknak987 We use a variety of frameworks depending on the project and its target, so there isn't one specific answer to your question. But if you forced my hand, I would say that if you are looking something with similar breadth of features to BS but which also has dropdowns as part of core framework, I would probably recommend Zurb Foundation Sites (https://foundation.zurb.com/sites.html).

There are also other options out there apart from Zurb. But they would be much "lighter" frameworks that don't have the same "kitchen sink" toolbox that Zurb and BS do.

Not only does Zurb have dropdown support, but they have good options for responsive (e.g. you can have it so that dropdowns on larger screens automagically transform into drilldowns (or other methods of your choice) on mobile.

We find it works really well and does the job, and most importantly it does the job "out of the box" so developers can focus on more important things than re-inventing the dropdown wheel or un-necessarily importing third-party hacks.

Yes, some people may comment the Zurb codebase is feeling slightly old in its current v6, some people might complain its not "cutting-edge" enough, but there is a new version around the corner that should silence any such comments. Overall though, Zurb behaves really well (and of course the benefit of their slightly older codebase is that support for older browsers is still quite good).

Don't get me wrong, I'm not saying Zurb is perfect. But neither is BS (especially with its lack of dropdowns !).

[douglasg14b]

@naknak987 I would definitely recommend Fomantic UI (https://github.com/fomantic/Fomantic-UI) a community fork of Semantic UI. Good dropdown support, good responsiveness, and a very large range of kitchen-sink features.

I've used Semantic UI for years, and was actually driven to it originally because I needed multi-level dropdown support out of the box for a quick project...

[mlopezgva]

the main idea is, as @mdo said, "it hasn't stopped anyone from building anything".

Yep, but I dismissed BS 3.x+ as soon as the project I was in ended (yes, I made a hack based on BS2) and never built anything else with it, mostly because this feature was removed and there is no sign of even try to think about having it back.

Now every time anyone suggests using BS, I show them three alternatives for them to know there are other options, some of them better and with users (devs and end users) in mind.

Nowadays I continue building things, but not with BS, I mostly use Fomantic-UI (Semantic had been stalled for some time).

[Chrisimir]

I think an appropriate workaround is to make nested menus Collapsible elements.
This will make it semantically correct, it has the expected functionality for mobile (click to open) and it is allowed within Bootstrap.