How to create a mega menu using Bootstrap?

Using Bootstrap to create a mega menu simply extends its drop-down component, implemented through structured HTML and a small amount of CSS. 1. Adopt a standard navigation bar and drop-down menu structure, and replace the default dropdown-menu with a container containing multi-column content. For example, in the example, the .row and .col-* layouts within the .container are used to display category links and images. 2. Make the drop-down menu display full width by adding w-100, left: 0; right: 0 and other styles, and use the container class to control the padding and alignment. 3. To ensure responsive effects, you can use d-lg-block to control display breakpoints and combine responsive grid classes to stack columns on small screens. The entire process does not require additional JavaScript and only relies on Bootstrap's built-in functions.

To create a mega menu using Bootstrap, you don't need complex custom code—just extend Bootstrap's dropdown component with structured HTML and a bit of extra CSS for layout. This works well in Bootstrap 5 (also applicable to Bootstrap 4). A mega menu typically includes multiple columns, images, links, or even forms inside a dropdown.

1. Use Bootstrap Dropdown Structure

Start with a standard Bootstrap navbar and dropdown. The key is to replace the default dropdown-menu with a wider container that holds multiple columns or content blocks.

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Site</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="megaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Mega Menu
          </a>
          <div class="dropdown-menu w-100" aria-labelledby="megaMenu" style="left: 0; right: 0;">
            <div class="container">
              <div class="row">
                <div class="col-md-3">
                  <h5>Category 1</h5>
                  <ul class="list-unstyled">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h5>Category 2</h5>
                  <ul class="list-unstyled">
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                  </ul>
                </div>
                <div class="col-md-6">
                  <img class="img-fluid lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="Mega Menu Promo">
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

2. Style the Mega Menu

The default dropdown may not span full width or look polished. Override styles slightly to make it responsive and visually appealing.

• Use .w-100 or custom width on .dropdown-menu to stretch it.
• Add container or container-fluid inside the dropdown for proper spacing.
• Set left: 0; right: 0; via inline style or CSS to align full-width under navbar.
• Hide the arrow if not needed, or add a border-top for visual separation.

3. Make It Responsive

Ensure the mega menu adapts on mobile. By default, dropdowns collapse on small screens. You can either disable the mega behavior on mobile or restructure content.

• Use .d-none .d-lg-block on desktop-only sections.
• Stack columns vertically on small screens using .col-12 or responsive grid classes.
• Test with @media queries to adjust padding or font size.

Basically, a Bootstrap mega menu leverages the existing dropdown and grid system. No JavaScript beyond Bootstrap's built-in toggle is required. Just structure your content inside the dropdown-menu using rows and columns.

The above is the detailed content of How to create a mega menu using Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!