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 at are implemented. You can freely use css classes and js methods/events/options.

The BS dropdown menu can be easily changed to an infinite level. It is a pity that they did not. Regular JavaScript to extend the native Bootstrap 5 dropdown menu component that allows you to toggle an unlimited level of submenus on click or scroll.

A great solution to create a multi-level dropdown menu on the Bootstrap 5 navigation bar without breaking the original HTML.

How to make use of it:

1. Load the JavaScript bootstrap5-dropdown-ml-hack.js and bootstrap5-dropdown-ml-hack-hover.css in your Bootstrap 5 undertaking.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>
<link href="bootstrap5-dropdown-ml-hack-hover.css" rel="stylesheet" />
<script src="bootstrap5-dropdown-ml-hack.js"></script>

2. To create a hover-triggered multi-level dropdown, simply add the dropdown-hover-all & dropdown dropdown-hover classes to your dropdown as proven below:

<div class="dropdown-hover-all">
  <!-- .dropdown elements -->
<div class="dropdown dropdown-hover">
  <!-- toggle and menu elements -->

Multi-level Dropdown Component For Bootstrap 5, Bootstrap 5 Multiple Level Dropdown Plugin/Github, multi level dropdown navbar bootstrap 4, bootstrap multilevel dropdown on hover responsive

See Demo And Download

Official Website(dallaslu): Click Here

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