Bootstrap 5 Multiple Level Dropdown.
For Bootstrap 4, please visit Bootstrap 4 Multiple Level Dropdown
Using official HTML without adding extra CSS styles and classes, it's just like native support.
All things listed in https://v5.getbootstrap.com/docs/5.0/components/dropdowns/ are not effected. You can use css classes and js methods/events/options freely.
Dropdown of bootstrap can be easily changed to infinite level. It's a pity that they didn't do it.
Usage
Base
Just add js after bootstrap js files:
<script src="https://raw.githubusercontent.com/dallaslu/bootstrap-5-multi-level-dropdown/master/bootstrap5-dropdown-ml-hack.js"></script>
Base Example
...
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<!-- level #2 -->
<div class="dropdown dropend">
<a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Layouts</a>
<div class="dropdown-menu" aria-labelledby="dropdown-layouts">
<a class="dropdown-item" href="#">Basic</a>
<a class="dropdown-item" href="#">Compact Aside</a>
<div class="dropdown-divider"></div>
<!-- level #3 -->
<div class="dropdown dropend">
<a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Custom</a>
<div class="dropdown-menu" aria-labelledby="dropdown-layouts">
<a class="dropdown-item" href="#">Fullscreen</a>
<a class="dropdown-item" href="#">Empty</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Magic</a>
</div>
</div>
<!-- /level #3 -->
</div>
</div>
<!-- /level #2 -->
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
...
<script src="https://raw.githubusercontent.com/dallaslu/bootstrap-5-multi-level-dropdown/master/bootstrap5-dropdown-ml-hack.js"></script>
Hover
If your want a hover tigger, just add class and some custom styles to reduce spacing to avoid triggering mouseleave.
.dropdown-hover-all .dropdown-menu, .dropdown-hover > .dropdown-menu.dropend { margin-left:-1px !important }
or:
<link rel="stylesheet" href="https://raw.githubusercontent.com/dallaslu/bootstrap-5-multi-level-dropdown/master/bootstrap5-dropdown-ml-hack-hover.css" />
Then, add classes for dropdown elements;
<div class="dropdown-hover-all">
<!-- .dropdown elements -->
</div>
<div class="dropdown dropdown-hover">
<!-- toggle and menu elements -->
</div>
Hover Example
<link rel="stylesheet" href="https://raw.githubusercontent.com/dallaslu/bootstrap-5-multi-level-dropdown/master/bootstrap5-dropdown-ml-hack-hover.css" />
...
<div class="dropdown-hover-all">
<!-- .dropdown elements -->
</div>
<div class="dropdown dropdown-hover">
<!-- toggle and menu elements -->
</div>
...
<script src="https://raw.githubusercontent.com/dallaslu/bootstrap-5-multi-level-dropdown/master/bootstrap5-dropdown-ml-hack.js"></script>
Demo
demo.html
git clone [email protected]:dallaslu/bootstrap-5-multi-level-dropdown.git
cd bootstrap-5-multi-level-dropdown
npm install
gulp
jsfiddle
Here is a perfect demo: https://jsfiddle.net/dallaslu/mvk4uhzL/ (works well with Bootstrap v5.0.2)
40 Dec 18, 2022
14 Feb 10, 2022
138 Jan 2, 2023
22 Dec 8, 2022
30 Dec 21, 2022
191 Dec 30, 2022
3 Oct 5, 2022
4 Jan 22, 2022
400 Jan 3, 2023
12 Sep 10, 2022
65 Nov 2, 2022
18 Nov 21, 2022
6 Mar 29, 2022
20 Dec 30, 2022
5.2k Jan 3, 2023
1.3k Dec 22, 2022
94 Aug 22, 2022
5 Apr 4, 2022
23 Dec 27, 2022