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.

Demo

View demo