ok
Mini Shell
<!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="html, css bootstrap, mega menu, navbar, large dropdown, menu CSS examples" />
<meta name="description" content="Bootstrap 5 navbar megamenu examples with simple css demo code" />
<title>Demo - Bootstrap navbar megamenu dropdown. html code example </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script>
<style type="text/css">
.navbar .megamenu{ padding: 1rem; }
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
.navbar .has-megamenu{position:static!important;}
.navbar .megamenu{left:0; right:0; width:100%; 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>
<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>
</head>
<body>
<header class="section-header py-4">
<div class="container">
<h2>Demo page </h2>
</div>
</header> <!-- section-header.// -->
<div class="container">
<!-- ============= COMPONENT ============== -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<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 position-static">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Mega menu
</a>
<!-- Dropdown menu -->
<div
class="dropdown-menu w-100 mt-0"
aria-labelledby="navbarDropdown"
style="
border-top-left-radius: 0;
border-top-right-radius: 0;
"
>
<div class="container">
<div class="row my-4">
<div
class="col-md-6 col-lg-3 mb-3 mb-lg-0"
>
<div
class="list-group list-group-flush"
>
<p
class="mb-0 list-group-item text-uppercase font-weight-bold"
>
Lorem ipsum
</p>
<a
href=""
class="list-group-item list-group-item-action"
>Dolor sit</a
>
<a
href=""
class="list-group-item list-group-item-action"
>Amet consectetur</a
>
<a
href=""
class="list-group-item list-group-item-action"
>Cras justo odio</a
>
<a
href=""
class="list-group-item list-group-item-action"
>Adipisicing elit</a
>
</div>
</div>
<div
class="col-md-6 col-lg-3 mb-3 mb-lg-0"
>
<div
class="list-group list-group-flush"
>
<p
class="mb-0 list-group-item text-uppercase font-weight-bold"
>
Explicabo voluptas
</p>
<a
href=""
class="list-group-item list-group-item-action"
>Perspiciatis quo</a
>
<a
href=""
class="list-group-item list-group-item-action"
>Cras justo odio</a
>
<a
href=""
class="list-group-item list-group-item-action"
>Laudantium maiores</a
>
<a
href=""
class="list-group-item list-group-item-action"
>Provident dolor</a
>
</div>
</div>
<div
class="col-md-6 col-lg-3 mb-3 mb-md-0"
>
<div
class="list-group list-group-flush"
>
<p
class="mb-0 list-group-item text-uppercase font-weight-bold"
>
Iste quaerato
</p>
<a
href=""
class="list-group-item list-group-item-action"
>Cras justo odio</a
>
<a
href=""
class="list-group-item list-group-item-action"
>Est iure</a
>
<a
href=""
class="list-group-item list-group-item-action"
>Praesentium</a
>
<a
href=""
class="list-group-item list-group-item-action"
>Laboriosam</a
>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div
class="list-group list-group-flush"
>
<p
class="mb-0 list-group-item text-uppercase font-weight-bold"
>
Cras justo odio
</p>
<a
href=""
class="list-group-item list-group-item-action"
>Saepe</a
>
<a
href=""
class="list-group-item list-group-item-action"
>Vel alias</a
>
<a
href=""
class="list-group-item list-group-item-action"
>Sunt doloribus</a
>
<a
href=""
class="list-group-item list-group-item-action"
>Cum dolores</a
>
</div>
</div>
</div>
</div>
</div>
</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-6">
<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-6">
<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-6">
<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-6">
<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>
<!-- ============= COMPONENT END// ============== -->
<section class="section-content py-5">
<h6>Demo for Navbar with megamenu dropdown. <br> Based on Bootstrap 5 CSS framework. </h6>
<p>For this demo page you should connect to the internet to receive files from CDN like Bootstrap5 CSS, Bootstrap5 JS</p>
<p class="text-muted"> 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. 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>
<a href="https://bootstrap-menu.com/detail-megamenu.html" class="btn btn-success"> « Back to tutorial or Download code</a>
</section>
</div><!-- container // -->
</body>
</html>
Zerion Mini Shell 1.0