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 https://v5.getbootstrap.com/docs/5.0/components/dropdowns/ 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.

Must Read: [Header] Responsive Dropdown Menu Bar With JavaScript/CSS

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.

<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:

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