Bootstrap 5 navbar with mega menu dropdown and hover animation.
In this code example, we’ll show the thanks to turning out a Bootstrap 5 mega menu dropdown with a full browse inside the instrumentality. Let’s begin,
Steps to create a mega menu
– Use the default Bootstrap’s 5 dropdown menu for your mega menu.
– Set the .dropdown position to static by overriding its CSS
– Add .has-megamenu on li half ( beside dropdown class name )
– Then add the new class name .megamenu beside the dropdown-menu class name.
– Fill content of mega menu with Bootstrap grid’s columns.
first, add bootstrap 5 online or offline link add your index.html file, and then create a nav class add and also add bootstrap 5 class then bootstrap 5 navbars done.
Code here copy and past in your index.html file.
<!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 navbar megamenu dropdown. html code example</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;
}
.navbar .megamenu{ padding: 1rem; }
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
.navbar .has-megamenu{position:static!important;}
.navbar .megamenu{left:10%; right:0; width:80%; margin-top:0; }
}
/* ============ desktop view .end// ============ */
/* ============ mobile view ============ */
@media(max-width: 991px){
.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
overflow-y: auto;
max-height: 90vh;
margin-top:10px;
}
}
/* ============ mobile view .end// ============ */
</style>
</head>
<body>
<header class="section-header py-4 text-center">
<div class="container">
<h1>Megamenu Dropdown </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"><a class="nav-link" href="#"> Services </a></li>
<li class="nav-item dropdown has-megamenu">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Mega menu </a>
<div class="dropdown-menu megamenu" role="menu">
<div class="row g-3">
<div class="col-lg-3 col-12">
<div class="col-megamenu">
<h6 class="title">Title Menu One</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-12">
<div class="col-megamenu">
<h6 class="title">Title Menu Two</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-12">
<div class="col-megamenu">
<h6 class="title">Title Menu Three</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div>
<div class="col-lg-3 col-12">
<div class="col-megamenu">
<h6 class="title">Title Menu Four</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
</div><!-- end row -->
</div> <!-- dropdown-mega-menu.// -->
</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 dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Dropdown right </a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
<li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
</ul>
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</div> <!-- container-fluid.// -->
</nav>
<!-- ============= header end============= -->
<section class=" py-5">
<h1>Demo for Navbar with megamenu dropdown. <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>
