Bootstrap 4 Second Level Menu Nav

Bootstrap v4 does not come with a second level navigation out of the box. You can add it with just a few lines of CSS and JS.

Here's how to do add a second level menu navigation to Bootstrap 4.

Actually with this you even to 3rd level menu navigation if you wish to.

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation menu"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdownLink"> <li><a class="dropdown-item" href="#">item</a></li> <li><a class="dropdown-item" href="#">Another item</a></li> <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Sub-menu</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Sub-menu item</a></li> <li><a class="dropdown-item" href="#">Another sub-menu item</a></li> <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Sub-sub-menu</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Sub-sub-menu item</a></li> <li><a class="dropdown-item" href="#">Another sub-sub-menu item</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Second sub-sub-menu</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Sub-sub-menu item</a></li> <li><a class="dropdown-item" href="#">Another sub-sub-menu item</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </nav>
Code language: HTML, XML (xml)

CSS

.dropdown-submenu { position: relative; } .dropdown-submenu a::after { transform: rotate(-90deg); position: absolute; right: 6px; top: .8em; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-left: .1rem; margin-right: .1rem; }
Code language: CSS (css)

JS

The code below uses jQuery:

$('.dropdown-menu a.dropdown-toggle').on('click', function() { if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass('show'); } const $subMenu = $(this).next('.dropdown-menu'); $subMenu.toggleClass('show'); $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function() { $('.dropdown-submenu .show').removeClass('show'); }); return false; });
Code language: JavaScript (javascript)

Mobile / Responsive

Yes, it even works in the mobile viewport.

Mobile Bootstrap 4 Second Level Menu Nav

Demo

View demo

Comments

  1. if i click on a level 3 submenu all parents submenus are marked as active. Also submenus that not a part of the clicked menu are active. How can i fix this?

  2. Ok, will this still work across devices? is it responsive to work on small screens with touch? or is this change now only for large screens?

    1. Very easy Jimmy!

      To make it work on hover (desktop) you just need this:

      .dropdown-menu { margin: 0; } .nav-item .dropdown-toggle:hover + .dropdown-menu { display: block; } .dropdown-menu:hover { display: block; }
      Code language: CSS (css)

      No margin

      You need to remove the margins otherwise the cursor goes into an empty area when moving from toggle to dropdown.

      Siblings

      Without changing the provided HTML markup from the post you need to select the sibling element when hovering. Use the adjacent sibling selector “+”

      Demo

      Here’s a working version in CodePen:

      https://codepen.io/quicoto/pen/rNLdrBa

      Enjoy!

Mentions

  • Ricard Torres

Leave a Reply

Your email address will not be published. Required fields are marked *