Bootstrap 5 multi-level dropdown menus
This is a totally responsive structure dropdown navbar code sample. it’s conjointly known as treeview menus. 1-st level dropdowns are opens by click, however, the inner submenus open by mouse hover.
On mobile screens, all menu things Associate in Nursingd their submenus work like Associate in Nursing accordion
Steps to make structure navbar dropdown menu with Bootstrap five
Add your hierarchical menu ul li components within parent li
Hide inner dropdowns submenus by adding display: none.
Add position: absolute; left:100%; top:-7px; // or on the point of 0px to inner ul hierarchical menu
Make inner dropdown hierarchical menu visible display: block once the mouse hovers parent li component
On smaller screens, we have a tendency to add some javascript code to indicate submenus when one another, like an accordion
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="htmlcss bootstrap aside menu, vertical, sidebar nav menu CSS examples" />
<meta name="description" content="Bootstrap 5 sidebar navigation menu example" />
<title>Bootstrap 5 multilevel dropdown submenu sample</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<!-- ======= Icons used for dropdown (you can use your own) ======== -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
background: yellow;
}
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
.dropdown-menu li{
position: relative;
}
.dropdown-menu .submenu{
display: none;
position: absolute;
left:100%; top:-7px;
}
.dropdown-menu .submenu-left{
right:100%; left:auto;
}
.dropdown-menu > li:hover{ background-color: #f1f1f1 }
.dropdown-menu > li:hover > .submenu{
display: block;
}
}
/* ============ desktop view .end// ============ */
/* ============ small devices ============ */
@media (max-width: 991px) {
.dropdown-menu .dropdown-menu{
margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
}
}
/* ============ small devices .end// ============ */
</style>
<script type="text/javascript">
window.addEventListener("resize", function() {
"use strict"; window.location.reload();
});
document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth < 992) {
// close all inner dropdowns when parent is closed
document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown){
everydropdown.addEventListener('hidden.bs.dropdown', function () {
// after dropdown is hidden, then find all submenus
this.querySelectorAll('.submenu').forEach(function(everysubmenu){
// hide every submenu as well
everysubmenu.style.display = 'none';
});
})
});
document.querySelectorAll('.dropdown-menu a').forEach(function(element){
element.addEventListener('click', function (e) {
let nextEl = this.nextElementSibling;
if(nextEl && nextEl.classList.contains('submenu')) {
// prevent opening link if link needs to open dropdown
e.preventDefault();
if(nextEl.style.display == 'block'){
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
})
}
// end if innerWidth
});
// DOMContentLoaded end
</script>
</head>
<body>
<header class="section-header py-4 text-center">
<div class="container">
<h1>multilevel dropdown submenu </h1>
</div>
</header> <!-- section-header.// -->
<div class="container-fluid p-0">
<!-- ============= header start ============== -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
<li class="nav-item"><a class="nav-link" href="#"> About </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Treeview menu </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
<li><a class="dropdown-item" href="#">Submenu item 3 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Multi level 1</a></li>
<li><a class="dropdown-item" href="#">Multi level 2</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Submenu item 4</a></li>
<li><a class="dropdown-item" href="#">Submenu item 5</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 </a>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> More items </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
<li><a class="dropdown-item" href="#">Submenu item 3</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 »</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Dropdown right </a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#"> Dropdown item 1</a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 » </a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="">Submenu item 1</a></li>
<li><a class="dropdown-item" href="">Submenu item 2</a></li>
<li><a class="dropdown-item" href="">Submenu item 3</a></li>
<li><a class="dropdown-item" href="">Submenu item 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 </a></li>
</ul>
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</div> <!-- container-fluid.// -->
</nav>
<!-- ============= header end============= -->
<section class=" py-5">
<h1>Demo for Navbar with multilevel dropdown submenu <br> Based on Bootstrap 5 CSS framework. </h1>
<p>For this demo page you should connect to the internet to receive files from CDN like Bootstrap5 CSS, Bootstrap5 JS</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div><!-- container // -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
/////// Prevent closing from click inside dropdown
document.querySelectorAll('.dropdown-menu').forEach(function(element){
element.addEventListener('click', function (e) {
e.stopPropagation();
});
})
});
// DOMContentLoaded end
</script>
</body>
</html>
