Bootstrap 4 Megamenu
Bootstrap 4 Megamenu navigation component
Bootstrap mega menu is a navigation component which enhances standard navbar features. Extended dropdown contains images and categorized links.
Basic Bootstrap 4 version
<!-- Navbar -->
<nav class="navbar navbar-expand-sm navbar-dark special-color-dark">
<!-- Navbar brand -->
<a class="navbar-brand text-uppercase" href="#">Navbar</a>
<!-- Collapse button -->
<button data-mdb-button-init class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<!-- Features -->
<li class="nav-item dropdown mega-dropdown active">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Features
<span class="sr-only">(current)</span>
</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-4 px-3"
aria-labelledby="navbarDropdownMenuLink2">
<div class="row">
<div class="col-md-6 col-xl-3 sub-menu">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<!-- Links -->
<!-- Search form -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</nav>
<!-- Navbar -->
Above is an example template for a Mega Menu in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.
Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.
This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation
Bootstrap v4 - full documentation
Basic Bootstrap 5 version
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button data-mdb-button-init class="navbar-toggler px-0" type="button" data-mdb-collapse-init
data-mdb-target="#navbarExample1" aria-controls="navbarExample1" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarExample1">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a data-mdb-dropdown-init 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">
<a href="" class="list-group-item list-group-item-action">Lorem ipsum</a>
<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">
<a href="" class="list-group-item list-group-item-action">Explicabo voluptas</a>
<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">
<a href="" class="list-group-item list-group-item-action">Iste quaerato</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">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">
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<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>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>