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.

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

See Also –

Mobile-friendly Multi-level Dropdown Menu With jQuery
Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav
Material Multi-Level Menu for Angular JS

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.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…

Leave a Reply

Your email address will not be published. Required fields are marked *