Hi I am trying to create a submenu with two levels depth.
Found some stuff but not actually working. Anyone has done this?
Thank you
Bootstrap 4 Framework does not natively support 2 level submenus, nor is this recommended for responsive web-design nowadays.
Yes I know but client insists… I do not agree either but
You can check some code samples in codepen: https://codepen.io/surjithctly/pen/PJqKzQ still i strongly suggest not to use multi level submenus 
It’s 2018 and there are more elegant ways of presenting the information, without making users to click on multiple submenus.
I agree and tried many times to convince for the oposite but she wants it like this. Thank you for your time
Do you think there are always better alternatives to multi-level menus? I still have quite a few old (non-responsive) sites which typically have menus like this:
… and which will be updated at some point. I don’t think using multi-level menus is an ideal way to navigate through hierarchies like this on a phone for example, but I’m not if there is an ideal solution.
I never actually liked too many submenus even a few years back when the sites were not responsive, especially when they are opening on hover
In my designs i prefer to have one main level with a sublevel if required, and then on the child template i prefer to list options on the page (instead of in a dropdown). It’s better for UX, even if you check sites like Amazon with millions of products - they also have one sublevel in their menus (yes it is a mega menu but still just one sublevel).
I’ve used mega menus before - I think they can certainly be a useful alternative to multi-level dropdowns, at least in some cases.
Surely the Amazon example already has an extra level - beyond what Bootstrap offers. I think it works very well with the submenu + mega menu. The mobile version uses a different type of menu (‘drilldown’?), which also works well. Perhaps extension ideas for Wappler? I find menus can be one of the trickiest things to get right.
1 Like