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. Andreas says:

    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?

    1. Hey Andreas,

      I don’t quite follow. Do you have a CodePen example?

  2. Jimmy says:

    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. There is no “hover” effect on touch devices, Jimmy.

      I would recommend using the regular click for touch/mobile devices and the hover only for desktop.

      You can use Media Queries to target the mobile and desktop separately

      https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

      Good luck!

  3. Jimmy says:

    Like everybody elses, this is just set to ‘click’? How do you build one using ‘hover’?

    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!

Leave a Reply

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