<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm"> <div class="container"> <a href="#" class="navbar-brand font-weight-bold">Multilevel Dropdown</a> <button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarContent" class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <!-- Level one dropdown --> <li class="nav-item dropdown"> <a id="dropdownMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Dropdown</a> <ul aria-labelledby="dropdownMenu1" class="dropdown-menu border-0 shadow"> <li><a href="#" class="dropdown-item">Some action </a></li> <li><a href="#" class="dropdown-item">Some other action</a></li> <li class="dropdown-divider"></li> <!-- Level two dropdown--> <li class="dropdown-submenu"> <a id="dropdownMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">Hover for action</a> <ul aria-labelledby="dropdownMenu2" class="dropdown-menu border-0 shadow"> <li> <a tabindex="-1" href="#" class="dropdown-item">level 2</a> </li> <!-- Level three dropdown--> <li class="dropdown-submenu"> <a id="dropdownMenu3" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">level 2</a> <ul aria-labelledby="dropdownMenu3" class="dropdown-menu border-0 shadow"> <li><a href="#" class="dropdown-item">3rd level</a></li> <li><a href="#" class="dropdown-item">3rd level</a></li> </ul> </li> <!-- End Level three --> <li><a href="#" class="dropdown-item">level 2</a></li> <li><a href="#" class="dropdown-item">level 2</a></li> </ul> </li> <!-- End Level two --> </ul> </li> <!-- End Level one --> <li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">Services</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> </div> </div> </nav> <!-- For demo purpose --> <section class="py-5 text-white"> <div class="container py-4"> <div class="row"> <div class="col-lg-9 mx-auto text-center"> <h1 class="display-4">Bootstrap 4 Multilevel dropdown</h1> <p class="lead mb-0">Step by step building a multilevel dropdown using Bootstrap 4.</p> <p class="lead">Snippet by <a href="https://bootstrapious.com/snippets" class="text-white"> <u>Bootstrapious</u></a></p> </div> </div> <div class="row pt-5"> <div class="col-lg-10 mx-auto"> <p class="lead">The first level is built by the default Bootstrap's dropdown menu.</p> <p class="lead">The next levels are structurally similar to the first level, but they're wrapped into <code>.dropdown-submneu</code> class instead of <code>.dropdown</code>.</p> <p class="lead">In the subsequent levels, We position the <code>.dropdown-menu</code> using css to achieve the desired location.</p> </div> </div> </div> </section> <!-- End -->

/* * * ========================================== * CUSTOM UTIL CLASSES * ========================================== * */ .dropdown-submenu { position: relative; } .dropdown-submenu>a:after { content: "\f0da"; float: right; border: none; font-family: 'FontAwesome'; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: 0px; margin-left: 0px; } /* * * ========================================== * FOR DEMO PURPOSES * ========================================== * */ body { background: #4568DC; background: -webkit-linear-gradient(to right, #4568DC, #B06AB3); background: linear-gradient(to right, #4568DC, #B06AB3); min-height: 100vh; } code { color: #B06AB3; background: #fff; padding: 0.1rem 0.2rem; border-radius: 0.2rem; } @media (min-width: 991px) { .dropdown-menu { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } }

$(function() { // ------------------------------------------------------- // // Multi Level dropdowns // ------------------------------------------------------ // $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) { event.preventDefault(); event.stopPropagation(); $(this).siblings().toggleClass("show"); if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass("show"); } $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { $('.dropdown-submenu .show').removeClass("show"); }); }); });