Bootstrap Menu
Dropdown with mega menu template

Free dropdown with mega menu template for your projects, built with the latest Bootstrap, HTML, CSS & JavaScript. MIT Licensed - free for personal & commercial use.

edit & download Live preview
  • License
    MIT License
  • Free for commercial use?
  • Bootstrap version
  • NPM downloads
  • GitHub stars
    GitHub Repo stars

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-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

Get more free tools & themes

Join the newsletter to receive more free templates - including Instagram, Facebook or Amazon clone templates, as well as multiple free tools & resources.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Privacy Policy