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

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>
    <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>
    <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>
    <li><a class="dropdown-item" href="#"> SEO </a></li>
    <li><a class="dropdown-item" href="#"> Management </a>

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

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

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') == '#')
    $('.dropdown').on('', function () {

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;



See Demo And Download

Official Website(paradoxmr24): Click Here

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

Related Posts


Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…


Insert HTML Into Your Browser Alert & Confirm Dialog | alert4html.js

alert4html.js is a JavaScript library that enables you to insert HTML directly into your browser alerts while simulating Chrome alerts as well. alert4html.js is an alternative to…


Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…


Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…


JQuery UI Built Dynamic Modal That Uses Bootstrap | confirm.js

confirm.js is to use confirm modal created using JQuery and Bootstrap. Put events in each custom button in your web application. Easy to implement, saves time. Requirements…


[Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile

The Bootstrap 5-off-canvas navigation menu is a responsive navigation system that combines BS5 components outside of the canvas and navbar. Must Read: Pure CSS Mobile-friendly Responsive Table…

Leave a Reply

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