Header Mega Menu
Documentation and examples for powerful, and responsive navigation mega menu.
How it works
This mega menu same with dropdown menu, we only make manipulation in css classes.
Mega menu tabs style
This is mega menu with tabs navigation
<!--mega menu tabs-->
<li class="nav-item mega-dropdown">
<a id="navbarmega2" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="#">Mega</a>
<div id="vertical-tabs" class="dropdown-menu mega w-100 px-3 py-0" aria-labelledby="navbarmega2">
<div class="row mega-hovers">
<div class="col-sm-3 col-md-2 vertical-tabs hover-tabs px-0 border-right-sm">
<!--navigation tabs-->
<ul class="nav nav-tabs text-center py-4 border-start-0 border-right-0 w-100" role="tablist">
<li class="nav-item">
<a id="nav-one" class="nav-link font-weight-normal active" href="#mega-one" role="tab" data-bs-toggle="tab" aria-controls="mega-one" aria-selected="true">Business</a>
</li>
<li class="nav-item">
<a id="nav-two" class="nav-link font-weight-normal" href="#mega-two" role="tab" data-bs-toggle="tab" aria-controls="mega-two" aria-selected="false">Travel</a>
</li>
</ul><!--end navigation tabs-->
</div>
<div class="col-sm-9 col-md-10 p-4">
<!-- Tabs start -->
<div id="mega-tabs" class="tab-content">
<!--tabs content-->
<div id="mega-one" class="tab-pane active show" role="tabpanel" aria-labelledby="nav-one">
<div class="row">
<!--post start-->
<article class="col-6 col-lg-3">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_203-114 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/203x114/img1.jpg" alt="Image description">
</a>
</div>
<!-- title, date and comments -->
<div class="card-body">
<h3 class="card-title h6">
<a href="#">Apple's stock rout starts and ends with the iPhone</a>
</h3>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-lg-3">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_203-114 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/203x114/img2.jpg" alt="Image description">
</a>
</div>
<!-- title, date and comments -->
<div class="card-body">
<h3 class="card-title h6">
<a href="#">Want the best Black Friday deals? Head to a store</a>
</h3>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-lg-3">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_203-114 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/203x114/img3.jpg" alt="Image description">
</a>
</div>
<!-- title, date and comments -->
<div class="card-body">
<h3 class="card-title h6">
<a href="#">Dubai launches pilot for Middle East 'Shark Tank'</a>
</h3>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-lg-3">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_203-114 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/203x114/img4.jpg" alt="Image description">
</a>
</div>
<!-- title, date and comments -->
<div class="card-body">
<h3 class="card-title h6">
<a href="#">European markets fight back to close higher; oil in focus</a>
</h3>
</div>
</div>
</article>
<!--end post-->
</div>
</div>
<!--tabs content-->
<div id="mega-two" class="tab-pane" role="tabpanel" aria-labelledby="nav-two">
<div class="row">
<!--post start-->
<article class="col-6 col-lg-3">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_203-114 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/203x114/img5.jpg" alt="Image description">
</a>
</div>
<!-- title, date and comments -->
<div class="card-body">
<h3 class="card-title h6">
<a href="#">Meet New Orleans’s All-Female Biker Club</a>
</h3>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-lg-3">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_203-114 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/203x114/img6.jpg" alt="Image description">
</a>
</div>
<!-- title, date and comments -->
<div class="card-body">
<h3 class="card-title h6">
<a href="#">Nascar’s Future Depends on These 5-Year-Olds</a>
</h3>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-lg-3">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_203-114 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/203x114/img7.jpg" alt="Image description">
</a>
</div>
<!-- title, date and comments -->
<div class="card-body">
<h3 class="card-title h6">
<a href="#">A Village in India Where Clean Living Became a Attraction</a>
</h3>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-lg-3">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_203-114 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/203x114/img8.jpg" alt="Image description">
</a>
</div>
<!-- title, date and comments -->
<div class="card-body">
<h3 class="card-title h6">
<a href="#">The N.Y.C. Parks Commissioner on the Experience of Place</a>
</h3>
</div>
</div>
</article>
<!--end post-->
</div>
</div>
<!-- end tabs content -->
</div>
<!--end tabs-->
</div>
</div>
</div>
</li>
<!--end mega menu-->
Mega menu with icon
This is mega menu with post type icons
<!--mega menu post icon-->
<li class="nav-item mega-dropdown">
<a id="navbarmega3" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="#">Video</a>
<div class="dropdown-menu mega w-100 p-4" aria-labelledby="navbarmega3">
<div class="row">
<!--video post start-->
<article class="col-6 col-lg-3">
<div class="card card-full hover-a mb-4">
<!--thumbnail, category & icon-->
<div class="ratio_251-141 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/251x141/img1.jpg" alt="Image description">
<div class="post-type-icon">
<span class="fa-stack-sea text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
</svg>
</span>
</div>
</a>
<a class="position-absolute m-2 t-0 p-1 badge badge-primary" href="#">Fashion</a>
</div>
<!-- title, date & comments -->
<div class="card-body">
<h3 class="card-title h6">
<a href="#">Why Sitting May Be Bad for Your Brain Health</a>
</h3>
</div>
</div>
</article>
<!--video post start-->
<article class="col-6 col-lg-3">
<div class="card card-full hover-a mb-4">
<!--thumbnail, category & icon-->
<div class="ratio_360-202 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/251x141/img2.jpg" alt="Image description">
<div class="post-type-icon">
<span class="fa-stack-sea text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
</svg>
</span>
</div>
</a>
<a class="position-absolute m-2 t-0 p-1 badge badge-primary" href="#">Life style</a>
</div>
<!-- title, date & comments -->
<div class="card-body">
<h3 class="card-title h6">
<a href="#">Underappreciated Key to College Success: Sleep</a>
</h3>
</div>
</div>
</article>
<!--video post start-->
<article class="col-6 col-lg-3">
<div class="card card-full hover-a mb-4">
<!--thumbnail, category & icon-->
<div class="ratio_360-202 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/251x141/img3.jpg" alt="Image description">
<div class="post-type-icon">
<span class="fa-stack-sea text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
</svg>
</span>
</div>
</a>
<a class="position-absolute m-2 t-0 p-1 badge badge-primary" href="#">Fashion</a>
</div>
<!-- title, date & comments -->
<div class="card-body">
<h3 class="card-title h6">
<a href="#">5 Simple Tips to Help Vegetarian or Vegan Travelers Eat Well, Anywhere</a>
</h3>
</div>
</div>
</article>
<!--video post start-->
<article class="col-6 col-lg-3">
<div class="card card-full hover-a mb-4">
<!--thumbnail, category & icon-->
<div class="ratio_360-202 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/251x141/img4.jpg" alt="Image description">
<div class="post-type-icon">
<span class="fa-stack-sea text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
</svg>
</span>
</div>
</a>
<a class="position-absolute m-2 t-0 p-1 badge badge-primary" href="#">Jewellery</a>
</div>
<!-- title, date & comments -->
<div class="card-body">
<h3 class="card-title h6">
<a href="#">Many Voters Tend to Believe Christine Blasey Ford</a>
</h3>
</div>
</div>
</article>
<!--end video post-->
</div>
</div>
</li>
<!--end mega menu-->
Mega menu list menu
This is mega menu with list menu
<!--mega list menu-->
<li class="nav-item mega-dropdown">
<a id="navbarmega4" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="#">News Block</a>
<!--content mega-->
<div class="dropdown-menu mega w-100 px-3 py-0 font-weight-normal" aria-labelledby="navbarmega4">
<ul class="row list-unstyled border-right-last-lg-0">
<!--menu list-->
<li class="col-sm-6 col-lg-3 mb-3 mb-lg-0 px-0 py-2 py-lg-4">
<!--title-->
<h5 class="title-nav"><strong>News Block A</strong></h5>
<!--link-->
<ul class="list-unstyled mega-link">
<li><a class="dropdown-item" href="#">Block - Layout 1</a></li>
<li><a class="dropdown-item" href="#">Block - Layout 2</a></li>
<li><a class="dropdown-item" href="#">Block - Layout 3</a></li>
</ul>
</li>
<!--menu list-->
<li class="col-sm-6 col-lg-3 mb-3 mb-lg-0 px-0 py-2 py-lg-4">
<!--title-->
<h5 class="title-nav"><strong>News Block B</strong></h5>
<!--link-->
<ul class="list-unstyled mega-link">
<li><a class="dropdown-item" href="#">Block - Layout 4</a></li>
<li><a class="dropdown-item" href="#">Block - Layout 5</a></li>
<li><a class="dropdown-item" href="#">Block - Layout 6</a></li>
</ul>
</li>
<!--menu list-->
<li class="col-sm-6 col-lg-3 mb-3 mb-lg-0 px-0 py-2 py-lg-4">
<!--title-->
<h5 class="title-nav"><strong>News Block C</strong></h5>
<!--link-->
<ul class="list-unstyled mega-link">
<li><a class="dropdown-item" href="#">Block - Layout 7</a></li>
<li><a class="dropdown-item" href="#">Block - Layout 8</a></li>
<li><a class="dropdown-item" href="#">Block - Layout 9</a></li>
</ul>
</li>
<!--menu list-->
<li class="col-sm-6 col-lg-3 mb-3 mb-lg-0 px-0 py-2 py-lg-4">
<!--title-->
<h5 class="title-nav"><strong>News Block D</strong></h5>
<!--link-->
<ul class="list-unstyled mega-link">
<li><a class="dropdown-item" href="#">Block - Layout 10</a></li>
<li><a class="dropdown-item" href="#">Block - Layout 11</a></li>
<li><a class="dropdown-item" href="#">Block - Layout 12</a></li>
</ul>
</li>
<!--end menu list-->
</ul>
</div>
</li>
<!--end mega menu-->
You can settings this mega menu in hover or click style. Just remove class .hover-mode from collapse navbar-collapse hover-mode
Use following code to make main navigation, or you can use header starter template in here
<!--Main menu-->
<div id="main-menu1" class="full-nav sticky-top no-md-sticky bg-white border-none border-lg-1 border-bottom shadow-b-sm py-0">
<div class="container">
<!--Main menu-->
<nav id="main-menu" class="main-menu navbar navbar-expand-lg navbar-light px-2 px-lg-0 py-0">
<!--Navbar menu-->
<div id="navbarTogglerDemo1" class="collapse navbar-collapse hover-mode">
<!--left main menu start-->
<ul id="left-main" class="navbar-nav main-nav navbar-uppercase first-left-lg-0">
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<!--Your mega menu code in here-->
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
</ul>
<!--end left main menu-->
</div>
<!--End navbar menu-->
</nav>
</div>
</div>
<!-- End main menu -->