Mega Menu

Bootstrap Mega Menu - free examples, templates & tutorial

Responsive Mega Menu built with Bootstrap 5. Examples of megamenu dropdown on click or hover. Templates with grid, images, links, lists, vertical menu and more.

To learn more read Navbar Docs.


Basic example

A basic dropdown mega menu inside of a Bootstrap navbar. You can use the same dropdown wrapper to embed your mega menu inside of a Side Navigation bar (also known as Sidebar, Offcanvas, Drawer, or simply Sidenav).

If you need to extend the depth of your menu by adding submenus to some of the items you could consider using a nested dropdown. Keep in mind that Mega Menu is already a complex component, so in order to keep your design clear and concise you probably shouldn't complicate it even further. It may be worth to consider re-organizing your page structure or using a search bar instead.

A standard practice is to use hamburger menu for mobile devices.

        
            
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- Container wrapper -->
            <div class="container-fluid">
              <!-- Toggle button -->
              <button class="navbar-toggler px-0" type="button" data-mdb-toggle="collapse"
                data-mdb-target="#navbarExample1" aria-controls="navbarExample1" aria-expanded="false"
                aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
              </button>

              <!-- Collapsible wrapper -->
              <div class="collapse navbar-collapse" id="navbarExample1">
                <!-- Left links -->
                <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Regular link</a>
                  </li>
                  <!-- Navbar dropdown -->
                  <li class="nav-item dropdown position-static">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                      data-mdb-toggle="dropdown" aria-expanded="false">
                      Mega menu
                    </a>
                    <!-- Dropdown menu -->
                    <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
                                    border-top-left-radius: 0;
                                    border-top-right-radius: 0;
                                  ">
                      <div class="container">
                        <div class="row my-4">
                          <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                            <div class="list-group list-group-flush">
                              <a href="" class="list-group-item list-group-item-action">Lorem ipsum</a>
                              <a href="" class="list-group-item list-group-item-action">Dolor sit</a>
                              <a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
                              <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                            <div class="list-group list-group-flush">
                              <a href="" class="list-group-item list-group-item-action">Explicabo voluptas</a>
                              <a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
                              <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
                              <a href="" class="list-group-item list-group-item-action">Provident dolor</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-3 mb-3 mb-md-0">
                            <div class="list-group list-group-flush">
                              <a href="" class="list-group-item list-group-item-action">Iste quaerato</a>
                              <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action">Est iure</a>
                              <a href="" class="list-group-item list-group-item-action">Praesentium</a>
                              <a href="" class="list-group-item list-group-item-action">Laboriosam</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-3">
                            <div class="list-group list-group-flush">
                              <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action">Saepe</a>
                              <a href="" class="list-group-item list-group-item-action">Vel alias</a>
                              <a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
                              <a href="" class="list-group-item list-group-item-action">Cum dolores</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- Left links -->
              </div>
              <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
          </nav>
          
        
    

Bolded headings

Check out different typography options to make the heading inside your multimenu stand out.

        
            
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- Container wrapper -->
            <div class="container-fluid">
              <!-- Toggle button -->
              <button class="navbar-toggler px-0" type="button" data-mdb-toggle="collapse"
                data-mdb-target="#navbarExample2" aria-controls="navbarExample2" aria-expanded="false"
                aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
              </button>

              <!-- Collapsible wrapper -->
              <div class="collapse navbar-collapse" id="navbarExample2">
                <!-- Left links -->
                <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Regular link</a>
                  </li>
                  <!-- Navbar dropdown -->
                  <li class="nav-item dropdown position-static">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                      data-mdb-toggle="dropdown" aria-expanded="false">
                      Mega menu
                    </a>
                    <!-- Dropdown menu -->
                    <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
                                    border-top-left-radius: 0;
                                    border-top-right-radius: 0;
                                  ">
                      <div class="container">
                        <div class="row my-4">
                          <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                            <div class="list-group list-group-flush">
                              <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                                Lorem ipsum
                              </p>
                              <a href="" class="list-group-item list-group-item-action">Dolor sit</a>
                              <a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
                              <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                            <div class="list-group list-group-flush">
                              <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                                Explicabo voluptas
                              </p>
                              <a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
                              <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
                              <a href="" class="list-group-item list-group-item-action">Provident dolor</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-3 mb-3 mb-md-0">
                            <div class="list-group list-group-flush">
                              <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                                Iste quaerato
                              </p>
                              <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action">Est iure</a>
                              <a href="" class="list-group-item list-group-item-action">Praesentium</a>
                              <a href="" class="list-group-item list-group-item-action">Laboriosam</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-3">
                            <div class="list-group list-group-flush">
                              <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                                Cras justo odio
                              </p>
                              <a href="" class="list-group-item list-group-item-action">Saepe</a>
                              <a href="" class="list-group-item list-group-item-action">Vel alias</a>
                              <a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
                              <a href="" class="list-group-item list-group-item-action">Cum dolores</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- Left links -->
              </div>
              <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
          </nav>
          
        
    

Punctation

Use list group or list typography to customize the lists inside your mega menu.

        
            
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- Container wrapper -->
            <div class="container-fluid">
              <!-- Toggle button -->
              <button class="navbar-toggler px-0" type="button" data-mdb-toggle="collapse"
                data-mdb-target="#navbarExample3" aria-controls="navbarExample3" aria-expanded="false"
                aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
              </button>

              <!-- Collapsible wrapper -->
              <div class="collapse navbar-collapse" id="navbarExample3">
                <!-- Left links -->
                <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Regular link</a>
                  </li>
                  <!-- Navbar dropdown -->
                  <li class="nav-item dropdown position-static">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                      data-mdb-toggle="dropdown" aria-expanded="false">
                      Mega menu
                    </a>
                    <!-- Dropdown menu -->
                    <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
                                    border-top-left-radius: 0;
                                    border-top-right-radius: 0;
                                  ">
                      <div class="container">
                        <div class="row my-4">
                          <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                            <div class="list-group list-group-flush">
                              <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                                Lorem ipsum
                              </p>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Dolor sit</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Amet consectetur</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Adipisicing elit</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                            <div class="list-group list-group-flush">
                              <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                                Explicabo voluptas
                              </p>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Perspiciatis quo</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Laudantium maiores</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Provident dolor</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-3 mb-3 mb-md-0">
                            <div class="list-group list-group-flush">
                              <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                                Iste quaerato
                              </p>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Est iure</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Praesentium</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Laboriosam</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-3">
                            <div class="list-group list-group-flush">
                              <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                                Cras justo odio
                              </p>
                              <a href="" class="list-group-item list-group-item-action">Saepe</a>
                              <a href="" class="list-group-item list-group-item-action">Vel alias</a>
                              <a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
                              <a href="" class="list-group-item list-group-item-action">Cum dolores</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- Left links -->
              </div>
              <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
          </nav>
          
        
    

Mixed content

By leveraging images, videos, product cards, weather cards, testimonial sliders, reviews, and any other element you can make your mega menu even more comprehensive. Standard flexbox utilities and Bootstrap grid should be enough to customize your menu to the highest extent.

        
            
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- Container wrapper -->
            <div class="container-fluid">
              <!-- Toggle button -->
              <button class="navbar-toggler px-0" type="button" data-mdb-toggle="collapse"
                data-mdb-target="#navbarExample4" aria-controls="navbarExample4" aria-expanded="false"
                aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
              </button>

              <!-- Collapsible wrapper -->
              <div class="collapse navbar-collapse" id="navbarExample4">
                <!-- Left links -->
                <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Regular link</a>
                  </li>
                  <!-- Navbar dropdown -->
                  <li class="nav-item dropdown position-static">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                      data-mdb-toggle="dropdown" aria-expanded="false">
                      Mega menu
                    </a>
                    <!-- Dropdown menu -->
                    <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
                                    border-top-left-radius: 0;
                                    border-top-right-radius: 0;
                                  ">
                      <div class="container">
                        <div class="row my-4">
                          <div class="col-md-6 col-xl-3 mb-3 mb-xl-0">
                            <div class="pt-2">
                              <p class="text-uppercase font-weight-bold">
                                Explicabo voluptas
                              </p>
                              <div class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
                                data-mdb-ripple-color="light">
                                <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="img-fluid" />
                                <a href="#!">
                                  <div class="mask" style="
                                                  background-color: rgba(
                                                    251,
                                                    251,
                                                    251,
                                                    0.15
                                                  );
                                                "></div>
                                </a>
                              </div>
                              <div class="d-flex justify-content-between">
                                <a href="" class="text-info"><i class="fas fa-plane pe-1"></i>Travels</a>
                                <p><u>15.07.2020</u></p>
                              </div>
                              <a href="" class="text-dark">
                                <h5>This is title of the news</h5>
                                <p>
                                  Lorem ipsum dolor sit amet
                                  consectetur adipisicing elit.
                                  Odit, iste aliquid. Sed id nihil
                                  magni, sint vero provident esse
                                  numquam perferendis ducimus dicta
                                  adipisci iusto nam temporibus modi
                                  animi laboriosam?
                                </p>
                              </a>
                            </div>
                          </div>
                          <div class="col-md-6 col-xl-3 mb-3 mb-xl-0">
                            <div class="pt-2">
                              <p class="text-uppercase font-weight-bold">
                                Explicabo voluptas
                              </p>
                              <a href="" class="text-dark">
                                <div class="row mb-4 border-bottom pb-2">
                                  <div class="col-3">
                                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
                                      class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
                                  </div>
                                  <div class="col-9">
                                    <p class="mb-2">
                                      <strong>Lorem ipsum dolor sit
                                        amet</strong>
                                    </p>
                                    <p><u>15.07.2020</u></p>
                                  </div>
                                </div>
                              </a>
                              <a href="" class="text-dark">
                                <div class="row mb-4 border-bottom pb-2">
                                  <div class="col-3">
                                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
                                      class="img-fluid shadow-1-strong rounded" alt="Palm Springs" />
                                  </div>
                                  <div class="col-9">
                                    <p class="mb-2">
                                      <strong>Lorem ipsum dolor sit
                                        amet</strong>
                                    </p>
                                    <p><u>15.07.2020</u></p>
                                  </div>
                                </div>
                              </a>
                              <a href="" class="text-dark">
                                <div class="row mb-4 border-bottom pb-2">
                                  <div class="col-3">
                                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
                                      class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
                                  </div>
                                  <div class="col-9">
                                    <p class="mb-2">
                                      <strong>Lorem ipsum dolor sit
                                        amet</strong>
                                    </p>
                                    <p><u>15.07.2020</u></p>
                                  </div>
                                </div>
                              </a>
                              <a href="" class="text-dark">
                                <div class="row mb-4 border-bottom pb-2">
                                  <div class="col-3">
                                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                                      class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
                                  </div>
                                  <div class="col-9">
                                    <p class="mb-2">
                                      <strong>Lorem ipsum dolor sit
                                        amet</strong>
                                    </p>
                                    <p><u>15.07.2020</u></p>
                                  </div>
                                </div>
                              </a>
                            </div>
                          </div>
                          <div class="col-md-6 col-xl-3 mb-3 mb-md-0">
                            <div class="list-group list-group-flush">
                              <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                                Iste quaerato
                              </p>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Est iure</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Praesentium</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Laboriosam</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Dolor sit</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Amet consectetur</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Adipiscing elit</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-xl-3">
                            <div class="list-group list-group-flush">
                              <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                                Cras justo odio
                              </p>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Saepe</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Vel alias</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Sunt doloribus</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Cum dolores</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Perspiciatis quo</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Laudantium maiores</a>
                              <a href="" class="list-group-item list-group-item-action"><i
                                  class="fas fa-caret-right pe-2"></i>Provident dolor</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- Left links -->
              </div>
              <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
          </nav>
          
        
    

Media list

Creating a list of news articles in your mega menu, can be easily achieved by utilizing media objects.

        
            
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- Container wrapper -->
            <div class="container-fluid">
              <!-- Toggle button -->
              <button class="navbar-toggler px-0" type="button" data-mdb-toggle="collapse"
                data-mdb-target="#navbarExample5" aria-controls="navbarExample5" aria-expanded="false"
                aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
              </button>

              <!-- Collapsible wrapper -->
              <div class="collapse navbar-collapse" id="navbarExample5">
                <!-- Left links -->
                <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Regular link</a>
                  </li>
                  <!-- Navbar dropdown -->
                  <li class="nav-item dropdown position-static">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                      data-mdb-toggle="dropdown" aria-expanded="false">
                      Mega menu
                    </a>
                    <!-- Dropdown menu -->
                    <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
                                    border-top-left-radius: 0;
                                    border-top-right-radius: 0;
                                  ">
                      <div class="container">
                        <div class="row my-4">
                          <div class="col-md-12 col-lg-4 mb-4 mb-lg-0">
                            <p class="text-uppercase font-weight-bold">
                              Explicabo voluptas
                            </p>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Palm Springs Road" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                            <a href="" class="text-dark">
                              <div class="row border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                          </div>
                          <div class="col-md-6 col-lg-4 mb-4 mb-md-0">
                            <p class="text-uppercase font-weight-bold">
                              Iste quaerato
                            </p>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Palm Springs Road" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                            <a href="" class="text-dark">
                              <div class="row border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                          </div>
                          <div class="col-md-6 col-lg-4 mb-4 mb-md-0">
                            <p class="text-uppercase font-weight-bold">
                              Cras justo odio
                            </p>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Palm Springs Road" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                            <a href="" class="text-dark">
                              <div class="row border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- Left links -->
              </div>
              <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
          </nav>
          
        
    

Big news

Adding a newsfeed preview, at the top of the mega-menu dropdown, is a standard practice in blog templates.

        
            
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- Container wrapper -->
            <div class="container-fluid">
              <!-- Toggle button -->
              <button class="navbar-toggler px-0" type="button" data-mdb-toggle="collapse"
                data-mdb-target="#navbarExample6" aria-controls="navbarExample6" aria-expanded="false"
                aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
              </button>

              <!-- Collapsible wrapper -->
              <div class="collapse navbar-collapse" id="navbarExample6">
                <!-- Left links -->
                <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Regular link</a>
                  </li>
                  <!-- Navbar dropdown -->
                  <li class="nav-item dropdown position-static">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                      data-mdb-toggle="dropdown" aria-expanded="false">
                      Mega menu
                    </a>
                    <!-- Dropdown menu -->
                    <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
                                    border-top-left-radius: 0;
                                    border-top-right-radius: 0;
                                  ">
                      <div class="container">
                        <div class="row my-4">
                          <div class="col-md-4 mb-4 mb-md-0">
                            <p class="text-uppercase font-weight-bold">
                              Explicabo voluptas
                            </p>
                            <div class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
                              data-mdb-ripple-color="light">
                              <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="img-fluid" />
                              <a href="#!">
                                <div class="mask" style="
                                                background-color: rgba(
                                                  251,
                                                  251,
                                                  251,
                                                  0.15
                                                );
                                              "></div>
                              </a>
                            </div>
                            <div class="d-flex justify-content-between">
                              <a href="" class="text-info"><i class="fas fa-plane pe-1"></i>Travels</a>
                              <p><u>15.07.2020</u></p>
                            </div>
                            <a href="" class="text-dark">
                              <h5>This is title of the news</h5>
                              <p>
                                Lorem ipsum dolor sit amet
                                consectetur adipisicing elit. Odit,
                                iste aliquid. Sed id nihil magni,
                                sint vero provident esse numquam
                                perferendis ducimus dicta adipisci
                                iusto nam temporibus modi animi
                                laboriosam?
                              </p>
                            </a>
                          </div>
                          <div class="col-md-4 mb-4 mb-md-0">
                            <p class="text-uppercase font-weight-bold">
                              Iste quaerato
                            </p>
                            <div class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
                              data-mdb-ripple-color="light">
                              <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/011.webp" class="img-fluid" />
                              <a href="#!">
                                <div class="mask" style="
                                                background-color: rgba(
                                                  251,
                                                  251,
                                                  251,
                                                  0.15
                                                );
                                              "></div>
                              </a>
                            </div>
                            <div class="d-flex justify-content-between">
                              <a href="" class="text-danger"><i class="fas fa-chart-pie pe-1"></i>Business</a>
                              <p><u>15.07.2020</u></p>
                            </div>
                            <a href="" class="text-dark">
                              <h5>This is title of the news</h5>
                              <p>
                                Lorem ipsum dolor sit amet
                                consectetur adipisicing elit. Odit,
                                iste aliquid. Sed id nihil magni,
                                sint vero provident esse numquam
                                perferendis ducimus dicta adipisci
                                iusto nam temporibus modi animi
                                laboriosam?
                              </p>
                            </a>
                          </div>
                          <div class="col-md-4">
                            <p class="text-uppercase font-weight-bold">
                              Cras justo odio
                            </p>
                            <div class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
                              data-mdb-ripple-color="light">
                              <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/018.webp" class="img-fluid" />
                              <a href="#!">
                                <div class="mask" style="
                                                background-color: rgba(
                                                  251,
                                                  251,
                                                  251,
                                                  0.15
                                                );
                                              "></div>
                              </a>
                            </div>
                            <div class="d-flex justify-content-between">
                              <a href="" class="text-warning"><i class="fas fa-code pe-1"></i>Technology</a>
                              <p><u>15.07.2020</u></p>
                            </div>
                            <a href="" class="text-dark">
                              <h5>This is title of the news</h5>
                              <p>
                                Lorem ipsum dolor sit amet
                                consectetur adipisicing elit. Odit,
                                iste aliquid. Sed id nihil magni,
                                sint vero provident esse numquam
                                perferendis ducimus dicta adipisci
                                iusto nam temporibus modi animi
                                laboriosam?
                              </p>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- Left links -->
              </div>
              <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
          </nav>
          
        
    

Mixed media

        
            
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- Container wrapper -->
            <div class="container-fluid">
              <!-- Toggle button -->
              <button class="navbar-toggler px-0" type="button" data-mdb-toggle="collapse"
                data-mdb-target="#navbarExample7" aria-controls="navbarExample7" aria-expanded="false"
                aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
              </button>

              <!-- Collapsible wrapper -->
              <div class="collapse navbar-collapse" id="navbarExample7">
                <!-- Left links -->
                <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Regular link</a>
                  </li>
                  <!-- Navbar dropdown -->
                  <li class="nav-item dropdown position-static">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                      data-mdb-toggle="dropdown" aria-expanded="false">
                      Mega menu
                    </a>
                    <!-- Dropdown menu -->
                    <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
                                    border-top-left-radius: 0;
                                    border-top-right-radius: 0;
                                  ">
                      <div class="container">
                        <div class="row my-4">
                          <div class="col-md-12 col-xl-6 mb-4 col-lg-0">
                            <p
                              class="text-uppercase font-weight-bold text-center d-flex justify-content-center align-items-center">
                              Iste quaerato
                              <span class="badge bg-danger shadow-1-strong ms-2">News of the day</span>
                            </p>
                            <div class="row gx-4">
                              <div class="col-md-6 mb-4">
                                <div class="bg-image hover-overlay ripple rounded shadow-2-strong"
                                  data-mdb-ripple-color="light">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/slides/080.webp" class="img-fluid" />
                                  <a href="#!">
                                    <div class="mask" style="
                                                    background-color: rgba(
                                                      251,
                                                      251,
                                                      251,
                                                      0.15
                                                    );
                                                  "></div>
                                  </a>
                                </div>
                              </div>
                              <div class="col-md-6 mb-3">
                                <p class="text-muted">
                                  Lorem ipsum dolor sit amet
                                  consectetur adipisicing elit.
                                  Facilis consequatur eligendi
                                  quisquam doloremque vero ex
                                  debitis veritatis placeat unde
                                  animi laborum sapiente illo
                                  possimus, commodi dignissimos
                                  obcaecati illum maiores corporis.
                                </p>
                                <button type="button" class="btn btn-primary">
                                  Read more
                                </button>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-6 col-xl-3 mb-4 mb-md-0">
                            <p class="text-uppercase font-weight-bold">
                              Explicabo voluptas
                            </p>
                            <div class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
                              data-mdb-ripple-color="light">
                              <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="img-fluid" />
                              <a href="#!">
                                <div class="mask" style="
                                                background-color: rgba(
                                                  251,
                                                  251,
                                                  251,
                                                  0.15
                                                );
                                              "></div>
                              </a>
                            </div>
                            <div class="d-flex justify-content-between">
                              <a href="" class="text-info"><i class="fas fa-plane pe-1"></i>Travels</a>
                              <p><u>15.07.2020</u></p>
                            </div>
                            <a href="" class="text-dark">
                              <h5>This is title of the news</h5>
                              <p>
                                Lorem ipsum dolor sit amet
                                consectetur adipisicing elit. Odit,
                                iste aliquid. Sed id nihil magni,
                                sint vero provident esse numquam
                                perferendis ducimus dicta adipisci
                                iusto nam temporibus modi animi
                                laboriosam?
                              </p>
                            </a>
                          </div>
                          <div class="col-md-6 col-xl-3">
                            <p class="text-uppercase font-weight-bold">
                              Explicabo voluptas
                            </p>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Palm Springs Road" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                            <a href="" class="text-dark">
                              <div class="row mb-4 border-bottom pb-2">
                                <div class="col-3">
                                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                                    class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
                                </div>
                                <div class="col-9">
                                  <p class="mb-2">
                                    <strong>Lorem ipsum dolor sit
                                      amet</strong>
                                  </p>
                                  <p><u>15.07.2020</u></p>
                                </div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- Left links -->
              </div>
              <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
          </nav>
          
        
    

Dropdown on hover

For desktop devices, you can also enable displaying mega menu on hover.

        
            
          <nav class="navbar navbar-expand-lg navbar-light bg-light" style="padding: 0px;">
            <!-- Container wrapper -->
            <div class="container-fluid">
              <!-- Toggle button -->
              <button class="navbar-toggler px-0" type="button" data-mdb-toggle="collapse"
                data-mdb-target="#navbarExampleOnHover" aria-controls="navbarExampleOnHover" aria-expanded="false"
                aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
              </button>

              <!-- Collapsible wrapper -->
              <div class="collapse navbar-collapse" id="navbarExampleOnHover">
                <!-- Left links -->
                <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Regular link</a>
                  </li>
                  <!-- Navbar dropdown -->
                  <li class="nav-item dropdown dropdown-hover position-static">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                      data-mdb-toggle="dropdown" aria-expanded="false">
                      Mega menu
                    </a>
                    <!-- Dropdown menu -->
                    <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="border-top-left-radius: 0;
                                      border-top-right-radius: 0;
                                    ">

                      <div class="container">
                        <div class="row my-4">
                          <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                            <div class="list-group list-group-flush">
                              <a href="" class="list-group-item list-group-item-action">Lorem ipsum</a>
                              <a href="" class="list-group-item list-group-item-action">Dolor sit</a>
                              <a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
                              <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                            <div class="list-group list-group-flush">
                              <a href="" class="list-group-item list-group-item-action">Explicabo voluptas</a>
                              <a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
                              <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
                              <a href="" class="list-group-item list-group-item-action">Provident dolor</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-3 mb-3 mb-md-0">
                            <div class="list-group list-group-flush">
                              <a href="" class="list-group-item list-group-item-action">Iste quaerato</a>
                              <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action">Est iure</a>
                              <a href="" class="list-group-item list-group-item-action">Praesentium</a>
                              <a href="" class="list-group-item list-group-item-action">Laboriosam</a>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-3">
                            <div class="list-group list-group-flush">
                              <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                              <a href="" class="list-group-item list-group-item-action">Saepe</a>
                              <a href="" class="list-group-item list-group-item-action">Vel alias</a>
                              <a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
                              <a href="" class="list-group-item list-group-item-action">Cum dolores</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- Left links -->
              </div>
              <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
          </nav>
          
        
    
        
            
          .nav-item {
            padding: 0.5rem 0xp;
          }

          .dropdown-hover:hover>.dropdown-menu {
          display: inline-block;
          }

          .dropdown-hover>.dropdown-toggle:active {
          /*Without this, clicking will make it sticky*/
          pointer-events: none;
          }