Responsive Bootstrap 4 Multi-Level Dropdown Menu Plugin

Multilevel dropdown menu in Bootstrap 4 with a responsive design. This BS4 Navbar helps developers create multi-level dropdown menus inside your navigation bar and convert them into accordion on mobile devices.

Important: Reload the page after switching to the mobile device if you are testing a mobile device on your computer.

Must Read: A Mobile-first Vertical Responsive Menu Using HTML, CSS & JS

Responsive Bootstrap 4 Multi-Level Dropdown Menu Details

Post Name	Multilevel Dropdown Bootstrap
Author Name	paradoxmr24
Category	Bootstrap, Dropdown, Menu Plugins
Official Page	Click Here
Official Website	github.com
Publish Date	October 29, 2020
Last Update	August 6, 2023
Download	Link Below
License	MIT

How to make use of it:

1. Create a multi-level dropdown element from nested HTML lists in your navbar as follows.

<!-- Required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Services</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"> Web Development &raquo </a>
      <ul class="submenu dropdown-menu">
        <li><a class="dropdown-item" href="#"> WordPress Website </a></li>
        <li><a class="dropdown-item" href="#"> Website Design </a></li>
        <li><a class="dropdown-item" href="#"> Open Source </a></li>
        <li><a class="dropdown-item" href="#"> Custom CMS </a></li>
       </ul>
    </li>
    <li><a class="dropdown-item" href="#"> Software Development &raquo </a>
      <ul class="submenu dropdown-menu">
        <li><a class="dropdown-item" href="#"> Android App </a></li>
        <li><a class="dropdown-item" href="#"> Windows Software </a></li>
       </ul>
    </li>
    <li><a class="dropdown-item" href="#"> Designing &raquo </a>
       <ul class="submenu dropdown-menu">
        <li><a class="dropdown-item" href="#"> Web Designing </a></li>
        <li><a class="dropdown-item" href="#"> UI Design </a></li>
        <li><a class="dropdown-item" href="#"> Wireframing </a></li>
       </ul>
    </li>
    <li><a class="dropdown-item" href="#"> SEO </a></li>
    <li><a class="dropdown-item" href="#"> Management </a>
  </ul>
</li>

2. The jQuery script to closing from clicking on contained in the dropdown.

$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation();
});

3. Convert the multi-level dropdown into an accordion when working on a small display device (display screen width < 992px on this example).

if ($(window).width() < 992) {
  $('.dropdown-menu a').click(function(e){
    if($(this).attr('href') == '#')
      e.preventDefault();
    if($(this).next('.submenu').length){
      $(this).next('.submenu').toggle();
    }
    $('.dropdown').on('hide.bs.dropdown', function () {
      $(this).find('.submenu').hide();
    })
  });
}

4. The essential CSS styles for the Multi-level Dropdown.

@media (min-width: 992px){
  .dropdown-menu .dropdown-toggle:after {
    border-top: .3em solid transparent;
    border-right: 0;
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
  }
  .dropdown-menu .dropdown-menu{
    margin-left:0; margin-right: 0;
  }
  .dropdown-menu li{
    position: relative;
  }
  .nav-item .submenu{ 
    display: none;
    position: absolute;
    left:100%; top:-7px;
  }
  .nav-item .submenu-left{ 
    right:100%; left:auto;
  }
  .dropdown-menu > li:hover{ background-color: #f1f1f1 }
  .dropdown-menu > li:hover > .submenu{
    display: block;
  }
}