Press "Enter" to skip to content

Responsive Bootstrap 4 Multi-Level Dropdown Menu

Multilevel dropdown menu in Bootstrap 4 with a responsive design. This BS4 Navbar that 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.

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 forestall closing from click 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;
  }
}

Mobile-friendly Multi-level Dropdown For Bootstrap, Multi-level Dropdown Bootstrap Plugin/Github

Bootstrap-4-Multi-Level-Dropdown-Menu-Demo


See Demo And Download

 

Official Website(paradoxmr24): Click Here

This superior jQuery/javascript plugin is developed by paradoxmr24. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

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