Is there a library item I could use to add a sub/child menu item to an existing dropdown in a Bootstrap 4.x Navigation menu? (see my attached graphic - colors are optional)
If not, is there a tutorial or how would I manually code this?
Hi @randyrie,
Bootstrap 4 nested dropdowns can be a little painful because for some reason the developers elected to use the ‘popper.js’ library for the buttons, but not the navbar. This means that dropdowns only easily drop below items. Basically, you have to use some custom JavaScript/jQuery mixed with CSS if you want the menu items to be clickable. You can get away with just CSS if you are okay with hover. Here is a link to a hover example: Codeply v2
The top answer on this Stack Overflow question can point you in the right direction for having the clicks work, but you’ll have to work on styling: html - Bootstrap 4: Multilevel Dropdown Inside Navigation - Stack Overflow
Cheers,
Bob
I may be misunderstanding the question here so don’t shoot me lol, but Bootstrap 4 already has a system for 1 level of sub/child menu items as well as premade classes for dropping the menu in different places (top, right, bottom, left). I would suggest maybe checking out a premade Bootstrap4 menu from Bootstrap and see how it works?
I’m not that expert at Bootstrap, but I can’t get a nested sub-menu with the basic dropdowns. So basically a dropright within a dropdown doesn’t want to toggle. Might be missing something.