Multi-Level Dropdown Works With Bootstrap 5

bootstrap-5-multi-level-dropdown

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.

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>
<div class="dropdown dropdown-hover">
  <!-- toggle and menu elements -->
</div>

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.

Share