# Submenus (child menus) for dropdowns

**URL:** <https://forum.pinegrow.com/t/submenus-child-menus-for-dropdowns/5474>\
**Category:** General\
**Created:** [July 15, 2021, 8:41pm UTC](https://forum.pinegrow.com/t/submenus-child-menus-for-dropdowns/5474 "2021-07-15T20:41:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [July 15, 2021, 8:41pm UTC](https://forum.pinegrow.com/t/submenus-child-menus-for-dropdowns/5474/1 "2021-07-15T20:41:44Z")

</div>

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)  
 ![submenus](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/55df95058c3e74262f2f728ffa02db591d05692f.jpeg)  
If not, is there a tutorial or how would I manually code this?

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 16, 2021, 1:09pm UTC](https://forum.pinegrow.com/t/submenus-child-menus-for-dropdowns/5474/2 "2021-07-16T13:09:14Z")

</div>

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](https://www.codeply.com/go/ji5ijk6yJ4/bootstrap-4-dropdown-submenu-on-hover)  
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](https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation)  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![eiwd](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/eiwd/32/1112_2.png) [@eiwd](https://forum.pinegrow.com/u/eiwd)\
**Post date:** [July 22, 2021, 12:39pm UTC](https://forum.pinegrow.com/t/submenus-child-menus-for-dropdowns/5474/3 "2021-07-22T12:39:35Z")

</div>

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?

> **[Dropdowns](https://getbootstrap.com/docs/4.6/components/dropdowns/)**
>
> Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 22, 2021, 2:10pm UTC](https://forum.pinegrow.com/t/submenus-child-menus-for-dropdowns/5474/4 "2021-07-22T14:10:54Z")

</div>

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.