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 NameMultilevel Dropdown Bootstrap
Author Nameparadoxmr24
CategoryBootstrap, Dropdown, Menu Plugins
Official PageClick Here
Publish DateOctober 29, 2020
Last UpdateAugust 6, 2023
DownloadLink Below

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


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

Leave a Reply

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