Bootstrap 4 Mega Dropdown Menu

A mega dropdown menu is a menu that contains multiple levels. It allows a lot of links to be contained in a single dropdown without compromising usability. This article will understand how to create a bootstrap 4 mega dropdown menu.

Following are the various examples of bootstrap 4 mega dropdown menu.

Example 1:

<! DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "utf-8" />	
	<meta name = "viewport" content = "width=device-width, initial-scale=1">
	<title> Bootstrap 4 Mega dropdown Menu </title>
	<link rel="stylesheet"
		href =
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
	<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
	<script src =
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.8/popper.min.js">
	</script>
	<script src =
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js">
	</script>
	<style>
		.megamenu-li {
	position: static;
}
.megamenu {
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	padding: 15px;
}
body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(144deg, #ff2400, #e81d1d, #e8b71d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 13s ease infinite;
-o-animation: rainbow 17s ease infinite;
  animation: rainbow 14s ease infinite; }
@-moz-keyframes rainbow {
        0% { background-position: 10% 62% }
    50% { background-position: 10% 39% }
    100% { background-position: 10% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 10% 82% }
    50% { background-position: 10% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
h2 { 
text-align: center; 
color: black; 
font-size: 28px; 
width: 100%;
 margin: 20px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 10; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
h1 {  
  position: relative;  
  padding: 10;  
  margin: 20;  
  font-family: "Raleway", sans-serif;  
  font-weight: 200;  
  font-size: 40px;  
  color: white;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
	</style>
</head>
<body>
	<center>
		<h1> Example </h1>
		<h2> Bootstrap 4 Mega dropdown Menu </h2>
	</center>
	<div class = "container">
 <div class = "row">
  <div class = "col-12">
   <nav class = "navbar navbar-expand-lg navbar-light bg-light rounded">
    <a class = "navbar-brand" href = "#"> Bootstrap 4 Mega Menu </a>
    <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbar" aria-controls = "navbars" aria-expanded = "false" aria-label = "Toggle navigation">
	<span class = "navbar-toggler-icon"> </span>
		  </button>
    <div class = "collapse navbar-collapse" id = "navbar">
     <ul class = "navbar-nav mr-auto">
      <li class = "nav-item dropdown megamenu-li">
       <a class = "nav-link dropdown-toggle" href = " " id = "dropdown01" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Mega Menu 1 </a>
       <div class = "dropdown-menu megamenu" aria-labelledby = "dropdown01">
        <div class = "row">
         <div class = "col-sm-6 col-lg-3">
          <h5> Links </h5>
          <a class = "dropdown-item" href = "#"> Home </a>
          <a class = "dropdown-item" href = "#"> About US </a>
          <a class = "dropdown-item" href = "#"> Gallery </a>
          <a class = "dropdown-item" href = "#"> Contact US </a>
         </div>
         <div class = "col-sm-6 col-lg-3">
          <h5> More Links </h5>
                    <a class = "dropdown-item" href = "#"> Home </a>
          <a class = "dropdown-item" href = "#"> About US </a>
          <a class = "dropdown-item" href = "#"> Gallery </a>
          <a class = "dropdown-item" href = "#"> Contact US </a>
         </div>
         <div class = "col-sm-6 col-lg-3">
          <h5> Paragraph </h5>
          <p> Lorem ipsum dolor sit amet, adipisicing elit. </p>
         </div>
         <div class = "col-sm-6 col-lg-3">
          <h5> Image </h5>
          <img src = "4.png" alt="..." style = "width: 100%;">
         </div>
        </div>
       </div>
      </li>
      <li class = "nav-item dropdown megamenu-li">
       <a class = "nav-link dropdown-toggle" href="" id = "dropdown02" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false"> Mega Menu 2 </a>
       <div class = "dropdown-menu megamenu" aria-labelledby = "dropdown02">
        <div class = "row">
         <div class = "col-sm-6 col-lg-4">
          <h5> Image Slider </h5>
          <div id = "carouselExampleControls" class = "carousel slide" data-ride = "carousel">
           <div class = "carousel-inner">
            <div class = "carousel-item active">
             <img class = "d-block w-100" src = "3.png" alt = "...">
            </div>
            <div class = "carousel-item">
             <img class = "d-block w-100" src = "4.png" alt = "...">
            </div>
            <div class = "carousel-item">
             <img class = "d-block w-100" src = "3.png" alt = "...">
            </div>
           </div>
          </div>
         </div>
         <div class="col-sm-6 col-lg-3">
          <h5>Links</h5>
          <a class="dropdown-item" href="#">Another action</a>
                   </div>
         <div class="col-sm-6 col-lg-5">
          <h5> Paragraph </h5>
          <p> Lorem, ipsum dolor sit amet adipisicing elit. </p>
         </div>
        </div>
       </div>
      </li>
     </ul>
    </div>
   </nav>
  </div>
 </div>
</div>
	<script>
		$(document).ready(function() {
	$(".megamenu").on("click", function(e) {
		e.stopPropagation();
	});
});
	</script>
</body>
</html>

Explanation:

In the above example, we have created an example of a Bootstrap 4 mega dropdown menu. In this, we customize the navbar to have a full-width dropdown menu for certain nav items.

Output:

Following is the output of this example.