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
Back to all examples