« Back to main Free Hosting Bootstrap Builder Free UI Kit

Bootstrap dropdown with mega menu

View demo Download


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. 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. It is also called e-commerce mega menu.

Steps to create responsive dropdown with large submenu
  • Create navbar with dropdown menu.
  • Add another dropdown-menu after 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 sizing min-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

« Back to all examples

Creating e-commerce project?