Bootstrap dropdown with mega menu
Get 700+ Material components for the latest Bootstrap 5 for free. This component is also
available as ready-to-use solution in MDB UI Kit.
Learn more about Bootstrap Dropdown here, or
download MDB Free version with 700+ components here.
We know about dropdowns and multilevel dropdowns. But some of ecommerce websites has mega submenu. We will show large inner menus on hover on each dropdown item, similar to ebay or alibaba websites. In other words, When you hover on any menu item of dropdown menu, another large submenu will appear next to it. This kind of large dropdowns mostly used for e-commerce websites.
Steps to create responsive dropdown with large submenu
- Create navbar with dropdown menu.
- Add another
dropdown-menuafter dropdown-item element (inside li of first level dropdown-menu) - Add your own class for second level dropdown-menu, Let's add classmegasubmenu.
- Now we need to make second level dropdown-menu a bit larger and also set its position to
left:100%; top:0;and also sizingmin-height: 100%; min-width:500px; - Show it on mouse hover with css
.dropdown-menu > li:hover .megasubmenu{ display: block; } - Final step is to make it adaptive for mobile device. Just few javascript code
Here are basic code snippets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="main_nav"> | |
| <ul class="navbar-nav"> | |
| <li class="nav-item dropdown"> | |
| <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Menu item </a> | |
| <ul class="dropdown-menu"> | |
| <li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li> | |
| <li><a class="dropdown-item" href="#"> Dropdown item 2 </a></li> | |
| <li><a class="dropdown-item" href="#"> Dropdown item 3 </a></li> | |
| <li class="has-submenu"> | |
| <a class="dropdown-item dropdown-toggle" href="#"> Dropdown item 4 </a> | |
| <div class="megasubmenu dropdown-menu"> | |
| 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. | |
| </div> | |
| </li> | |
| <li class="has-submenu"> | |
| <a class="dropdown-item dropdown-toggle" href="#"> Dropdown item 5 </a> | |
| <div class="megasubmenu dropdown-menu"> | |
| 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. | |
| </div> | |
| </li> | |
| <li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li> | |
| </ul> | |
| </li> | |
| <li class="nav-item"> <a class="nav-link" href="#"> Menu item </a> </li> | |
| <li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li> | |
| <li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li> | |
| </ul> | |
| </div> | |
| <!-- navbar-collapse.// --> | |
| </div> | |
| <!-- container-fluid.// --> | |
| </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.addEventListener("DOMContentLoaded", function(){ | |
| /////// Prevent closing from click inside dropdown | |
| document.querySelectorAll('.dropdown-menu').forEach(function(element){ | |
| element.addEventListener('click', function (e) { | |
| e.stopPropagation(); | |
| }); | |
| }); | |
| // make it as accordion for smaller screens | |
| if (window.innerWidth < 992) { | |
| // close all inner dropdowns when parent is closed | |
| document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown){ | |
| everydropdown.addEventListener('hidden.bs.dropdown', function () { | |
| // after dropdown is hidden, then find all submenus | |
| this.querySelectorAll('.megasubmenu').forEach(function(everysubmenu){ | |
| // hide every submenu as well | |
| everysubmenu.style.display = 'none'; | |
| }); | |
| }) | |
| }); | |
| document.querySelectorAll('.has-submenu a').forEach(function(element){ | |
| element.addEventListener('click', function (e) { | |
| let nextEl = this.nextElementSibling; | |
| if(nextEl && nextEl.classList.contains('megasubmenu')) { | |
| // prevent opening link if link needs to open dropdown | |
| e.preventDefault(); | |
| if(nextEl.style.display == 'block'){ | |
| nextEl.style.display = 'none'; | |
| } else { | |
| nextEl.style.display = 'block'; | |
| } | |
| } | |
| }); | |
| }) // end foreach | |
| } | |
| // end if innerWidth | |
| }); | |
| // DOMContentLoaded end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .megasubmenu{ padding:1rem; } | |
| /* ============ desktop view ============ */ | |
| @media all and (min-width: 992px) { | |
| .dropdown-menu .dropdown-toggle::after{ | |
| border-top: .3em solid transparent; | |
| border-right: 0; | |
| border-bottom: .3em solid transparent; | |
| border-left: .3em solid; | |
| } | |
| .megasubmenu{ | |
| left:100%; top:0; min-height: 100%; min-width:500px; | |
| } | |
| .dropdown-menu > li:hover .megasubmenu{ | |
| display: block; | |
| } | |
| } | |
| /* ============ desktop view .end// ============ */ |
Back to all examples