Mega Menu

Vue Bootstrap Mega Menu - free examples, templates & tutorial

Responsive Vue 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.

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.

        
            
          <template>
            <section
              class="w-100 p-4"
              style="background-color: #eee; border-radius: 0.5rem 0.5rem 0 0"
            >
              <MDBNavbar
                container
                expand="lg"
                light
                bg="light"
                id="referenceTarget1"
              >
                <MDBNavbarToggler
                  @click="collapse1 = !collapse1"
                  target="#navbarExample1"
                />
                <MDBCollapse v-model="collapse1" id="navbarExample1">
                  <MDBNavbarNav
                    class="me-auto ps-lg-0"
                    style="padding-left: 0.15rem"
                  >
                    <MDBNavbarItem href="#"> Regular link </MDBNavbarItem>
                    <MDBNavbarItem class="position-static">
                      <MDBDropdown
                        class="nav-item"
                        v-model="dropdown1"
                        target="#referenceTarget1"
                      >
                        <MDBDropdownToggle
                          id="navbarDropdown1"
                          tag="a"
                          class="nav-link"
                          @click="dropdown1 = !dropdown1"
                          >Mega menu</MDBDropdownToggle
                        >
                        <MDBDropdownMenu
                          class="w-100 mt-0"
                          aria-labelledby="navbarDropdown1"
                          style="
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                          "
                        >
                          <MDBContainer>
                            <MDBRow class="my-4">
                              <MDBCol md="6" lg="3" class="mb-3 mb-lg-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Lorem ipsum</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Dolor sit</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Amet consectetur</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Adipisicing elit</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" lg="3" class="mb-3 mb-lg-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Explicabo voluptas</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Perspiciatis quo</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Laudantium maiores</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Provident dolor</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" lg="3" class="mb-3 mb-md-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Iste quaerato</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Est iure</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Praesentium</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Laboriosam</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" lg="3">
                                <MDBListGroup flush>
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Saepe</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Vel alias</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Sunt doloribus</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cum dolores</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                            </MDBRow>
                          </MDBContainer>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBCollapse>
              </MDBNavbar>
            </section>
          </template>
          
        
    
        
            
          <script>
            import {
              MDBContainer,
              MDBRow,
              MDBCol,
              MDBNavbar,
              MDBNavbarToggler,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBCollapse,
              MDBDropdown,
              MDBDropdownToggle,
              MDBDropdownMenu,
              MDBListGroup,
              MDBListGroupItem
            } from "mdb-vue-ui-kit";
            import { ref } from "vue";
            export default {
              components: {
                MDBContainer,
                MDBRow,
                MDBCol,
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBListGroup,
                MDBListGroupItem
              },
              setup(){
                const collapse1 = ref(false);
                const dropdown1 = ref(false);
                return {
                  collapse1,
                  dropdown1
                }
              }
            };
          </script>
          
        
    

Bolded headings

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

        
            
          <template>
            <section
              class="w-100 p-4"
              style="background-color: #eee; border-radius: 0.5rem 0.5rem 0 0"
            >
              <MDBNavbar
                container
                expand="lg"
                light
                bg="light"
                id="referenceTarget2"
              >
                <MDBNavbarToggler
                  @click="collapse2 = !collapse2"
                  target="#navbarExample2"
                />
                <MDBCollapse v-model="collapse2" id="navbarExample2">
                  <MDBNavbarNav
                    class="me-auto ps-lg-0"
                    style="padding-left: 0.15rem"
                  >
                    <MDBNavbarItem href="#"> Regular link </MDBNavbarItem>
                    <MDBNavbarItem class="position-static">
                      <MDBDropdown
                        class="nav-item"
                        v-model="dropdown2"
                        target="#referenceTarget2"
                      >
                        <MDBDropdownToggle
                          id="navbarDropdown2"
                          tag="a"
                          class="nav-link"
                          @click="dropdown2 = !dropdown2"
                          >Mega menu</MDBDropdownToggle
                        >
                        <MDBDropdownMenu
                          class="w-100 mt-0"
                          aria-labelledby="navbarDropdown2"
                          style="
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                          "
                        >
                          <MDBContainer>
                            <MDBRow class="my-4">
                              <MDBCol md="6" lg="3" class="mb-3 mb-lg-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem
                                    tag="a"
                                    href="#"
                                    action
                                    class="mb-0 text-uppercase font-weight-bold"
                                    >Lorem ipsum</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Dolor sit</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Amet consectetur</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Adipisicing elit</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" lg="3" class="mb-3 mb-lg-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem
                                    tag="a"
                                    href="#"
                                    action
                                    class="mb-0 text-uppercase font-weight-bold"
                                    >Explicabo voluptas</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Perspiciatis quo</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Laudantium maiores</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Provident dolor</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" lg="3" class="mb-3 mb-md-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem
                                    tag="a"
                                    href="#"
                                    action
                                    class="mb-0 text-uppercase font-weight-bold"
                                    >Iste quaerato</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Est iure</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Praesentium</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Laboriosam</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" lg="3">
                                <MDBListGroup flush>
                                  <MDBListGroupItem
                                    tag="a"
                                    href="#"
                                    action
                                    class="mb-0 text-uppercase font-weight-bold"
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Saepe</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Vel alias</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Sunt doloribus</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cum dolores</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                            </MDBRow>
                          </MDBContainer>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBCollapse>
              </MDBNavbar>
            </section>
          </template>
          
        
    
        
            
          <script>
            import {
              MDBContainer,
              MDBRow,
              MDBCol,
              MDBNavbar,
              MDBNavbarToggler,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBCollapse,
              MDBDropdown,
              MDBDropdownToggle,
              MDBDropdownMenu,
              MDBListGroup,
              MDBListGroupItem
            } from "mdb-vue-ui-kit";
            import { ref } from "vue";
            export default {
              components: {
                MDBContainer,
                MDBRow,
                MDBCol,
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBListGroup,
                MDBListGroupItem
              },
              setup(){
                const collapse1 = ref(false);
                const dropdown1 = ref(false);
                return {
                  collapse1,
                  dropdown1
                }
              }
            };
          </script>
          
        
    

Punctation

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

        
            
          <template>
            <section
              class="w-100 p-4"
              style="background-color: #eee; border-radius: 0.5rem 0.5rem 0 0"
            >
              <MDBNavbar
                container
                expand="lg"
                light
                bg="light"
                id="referenceTarget3"
              >
                <MDBNavbarToggler
                  @click="collapse3 = !collapse3"
                  target="#navbarExample3"
                />
                <MDBCollapse v-model="collapse3" id="navbarExample3">
                  <MDBNavbarNav
                    class="me-auto ps-lg-0"
                    style="padding-left: 0.15rem"
                  >
                    <MDBNavbarItem href="#"> Regular link </MDBNavbarItem>
                    <MDBNavbarItem class="position-static">
                      <MDBDropdown
                        class="nav-item"
                        v-model="dropdown3"
                        target="#referenceTarget3"
                      >
                        <MDBDropdownToggle
                          id="navbarDropdown2"
                          tag="a"
                          class="nav-link"
                          @click="dropdown3 = !dropdown3"
                          >Mega menu</MDBDropdownToggle
                        >
                        <MDBDropdownMenu
                          class="w-100 mt-0"
                          aria-labelledby="navbarDropdown2"
                          style="
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                          "
                        >
                          <MDBContainer>
                            <MDBRow class="my-4">
                              <MDBCol md="6" lg="3" class="mb-3 mb-lg-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem
                                    tag="a"
                                    href="#"
                                    action
                                    class="mb-0 text-uppercase font-weight-bold"
                                    >Lorem ipsum</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Dolor sit</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Amet consectetur</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Adipisicing elit</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" lg="3" class="mb-3 mb-lg-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem
                                    tag="a"
                                    href="#"
                                    action
                                    class="mb-0 text-uppercase font-weight-bold"
                                    >Explicabo voluptas</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Perspiciatis quo</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Laudantium maiores</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Provident dolor</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" lg="3" class="mb-3 mb-md-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem
                                    tag="a"
                                    href="#"
                                    action
                                    class="mb-0 text-uppercase font-weight-bold"
                                    >Iste quaerato</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" /> Est
                                    iure</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Praesentium</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Laboriosam</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" lg="3">
                                <MDBListGroup flush>
                                  <MDBListGroupItem
                                    tag="a"
                                    href="#"
                                    action
                                    class="mb-0 text-uppercase font-weight-bold"
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Saepe</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" /> Vel
                                    alias</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" />
                                    Sunt doloribus</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    ><MDBIcon icon="caret-right" class="pe-2" /> Cum
                                    dolores</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                            </MDBRow>
                          </MDBContainer>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBCollapse>
              </MDBNavbar>
            </section>
          </template>
          
        
    
        
            
          <script>
            import {  
              MDBContainer,
              MDBRow,
              MDBCol,
              MDBNavbar,
              MDBNavbarToggler,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBCollapse,
              MDBDropdown,
              MDBDropdownToggle,
              MDBDropdownMenu,
              MDBListGroup,
              MDBListGroupItem,
              MDBIcon
            } from "mdb-vue-ui-kit";
            import { ref } from "vue";
            export default {
              components: {
                MDBContainer,
                MDBRow,
                MDBCol,
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBListGroup,
                MDBListGroupItem,
                MDBIcon
              },
              setup(){
                const collapse3 = ref(false);
                const dropdown3 = ref(false);
                return {
                  collapse3,
                  dropdown3
                }
              }
            };
          </script>
          
        
    

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. Vue flexbox utilities and Bootstrap grid should be enough to customize your menu to the highest extent.

        
            
          <template>
            <section
              class="w-100 p-4"
              style="background-color: #eee; border-radius: 0.5rem 0.5rem 0 0"
            >
              <MDBNavbar
                container
                expand="lg"
                light
                bg="light"
                id="referenceTarget4"
              >
                <MDBNavbarToggler
                  @click="collapse4 = !collapse4"
                  target="#navbarExample4"
                />
                <MDBCollapse v-model="collapse4" id="navbarExample4">
                  <MDBNavbarNav
                    class="me-auto ps-lg-0"
                    style="padding-left: 0.15rem"
                  >
                    <MDBNavbarItem href="#"> Regular link </MDBNavbarItem>
                    <MDBNavbarItem class="position-static">
                      <MDBDropdown
                        class="nav-item"
                        v-model="dropdown4"
                        target="#referenceTarget4"
                      >
                        <MDBDropdownToggle
                          id="navbarDropdown4"
                          tag="a"
                          class="nav-link"
                          @click="dropdown4 = !dropdown4"
                          >Mega menu</MDBDropdownToggle
                        >
                        <MDBDropdownMenu
                          class="w-100 mt-0"
                          aria-labelledby="navbarDropdown4"
                          style="
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                          "
                        >
                          <MDBContainer>
                            <MDBRow class="my-4">
                              <MDBCol md="6" xl="3" class="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
                                    "
                                    v-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>
                              </MDBCol>
                              <MDBCol md="6" xl="3" class="mb-3 mb-xl-0">
                                <div class="pt-2">
                                  <p class="text-uppercase font-weight-bold">
                                    Explicabo voluptas
                                  </p>
                                  <a href="" class="text-dark">
                                    <MDBRow class="mb-4 border-bottom pb-2">
                                      <MDBCol 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"
                                        />
                                      </MDBCol>
                                      <MDBCol col="9">
                                        <p class="mb-2">
                                          <strong
                                            >Lorem ipsum dolor sit amet</strong
                                          >
                                        </p>
                                        <p><u>15.07.2020</u></p>
                                      </MDBCol>
                                    </MDBRow>
                                  </a>
                                  <a href="" class="text-dark">
                                    <MDBRow class="mb-4 border-bottom pb-2">
                                      <MDBCol 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"
                                        />
                                      </MDBCol>
                                      <MDBCol col="9">
                                        <p class="mb-2">
                                          <strong
                                            >Lorem ipsum dolor sit amet</strong
                                          >
                                        </p>
                                        <p><u>15.07.2020</u></p>
                                      </MDBCol>
                                    </MDBRow>
                                  </a>
                                  <a href="" class="text-dark">
                                    <MDBRow class="mb-4 border-bottom pb-2">
                                      <MDBCol 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"
                                        />
                                      </MDBCol>
                                      <MDBCol col="9">
                                        <p class="mb-2">
                                          <strong
                                            >Lorem ipsum dolor sit amet</strong
                                          >
                                        </p>
                                        <p><u>15.07.2020</u></p>
                                      </MDBCol>
                                    </MDBRow>
                                  </a>
                                  <a href="" class="text-dark">
                                    <MDBRow class="mb-4 border-bottom pb-2">
                                      <MDBCol col="3">
                                        <img
                                          src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                                          class="img-fluid shadow-1-strong rounded"
                                          alt="Skyscrapers"
                                        />
                                      </MDBCol>
                                      <MDBCol col="9">
                                        <p class="mb-2">
                                          <strong
                                            >Lorem ipsum dolor sit amet</strong
                                          >
                                        </p>
                                        <p><u>15.07.2020</u></p>
                                      </MDBCol>
                                    </MDBRow>
                                  </a>
                                </div>
                              </MDBCol>
                              <MDBCol md="6" xl="3" class="mb-3 mb-md-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem
                                    class="mb-0 text-uppercase font-weight-bold"
                                  >
                                    Iste quaerato
                                  </MDBListGroupItem>
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Est iure</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Praesentium</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Laboriosam</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Dolor sit</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Amet consectetur</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Adipiscing elit</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" class="col-md-6 col-xl-3">
                                <MDBListGroup flush>
                                  <MDBListGroupItem
                                    class="mb-0 text-uppercase font-weight-bold"
                                  >
                                    Cras justo odio
                                  </MDBListGroupItem>
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Saepe</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Vel alias</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Sunt doloribus</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Cum dolores</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Perspiciatis quo</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Laudantium maiores</MDBListGroupItem
                                  >
                                  <MDBListGroupItem href="" action
                                    ><MDBIcon
                                      icon="caret-right"
                                      class="pe-2"
                                    ></MDBIcon
                                    >Provident dolor</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                            </MDBRow>
                          </MDBContainer>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBCollapse>
              </MDBNavbar>
            </section>
          </template>
          
        
    
        
            
          <script>
            import {
              MDBContainer,
              MDBRow,
              MDBCol,
              MDBNavbar,
              MDBNavbarToggler,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBCollapse,
              MDBDropdown,
              MDBDropdownToggle,
              MDBDropdownMenu,
              MDBListGroup,
              MDBListGroupItem,
              MDBIcon,
              mdbRipple
            } from "mdb-vue-ui-kit";
            import { ref } from "vue";
            export default {
              components: {
                MDBContainer,
                MDBRow,
                MDBCol,
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBListGroup,
                MDBListGroupItem,
                MDBIcon,
                mdbRipple
              },
              directives : {
                mdbRipple
              },
              setup(){
                const collapse4 = ref(false);
                const dropdown4 = ref(false);
                return {
                  collapse4,
                  dropdown4
                }
              }
            };
          </script>
          
        
    

Media list

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

        
            
          <template>
            <section
              class="w-100 p-4"
              style="background-color: #eee; border-radius: 0.5rem 0.5rem 0 0"
            >
              <MDBNavbar
                container
                expand="lg"
                light
                bg="light"
                id="referenceTarget5"
              >
                <MDBNavbarToggler
                  @click="collapse5 = !collapse5"
                  target="#navbarExample5"
                />
                <MDBCollapse v-model="collapse5" id="navbarExample5">
                  <MDBNavbarNav
                    class="me-auto ps-lg-0"
                    style="padding-left: 0.15rem"
                  >
                    <MDBNavbarItem href="#"> Regular link </MDBNavbarItem>
                    <MDBNavbarItem class="position-static">
                      <MDBDropdown
                        class="nav-item"
                        v-model="dropdown5"
                        target="#referenceTarget5"
                      >
                        <MDBDropdownToggle
                          id="navbarDropdown5"
                          tag="a"
                          class="nav-link"
                          @click="dropdown5 = !dropdown5"
                          >Mega menu</MDBDropdownToggle
                        >
                        <MDBDropdownMenu
                          class="w-100 mt-0"
                          aria-labelledby="navbarDropdown5"
                          style="
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                          "
                        >
                          <MDBContainer>
                            <MDBRow class="my-4">
                              <MDBCol md="12" lg="4" class="mb-4 mb-lg-0">
                                <p class="text-uppercase font-weight-bold">
                                  Explicabo voluptas
                                </p>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol 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"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol 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"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol 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"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol col="3">
                                      <img
                                        src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                                        class="img-fluid shadow-1-strong rounded"
                                        alt="Skyscrapers"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                              </MDBCol>
                              <MDBCol md="6" lg="4" class="mb-4 mb-md-0">
                                <p class="text-uppercase font-weight-bold">
                                  Iste quaerato
                                </p>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol 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"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol 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"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol 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"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                                <a href="" class="text-dark">
                                  <MDBRow class="border-bottom pb-2">
                                    <MDBCol col="3">
                                      <img
                                        src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                                        class="img-fluid shadow-1-strong rounded"
                                        alt="Skyscrapers"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                              </MDBCol>
                              <MDBCol md="6" lg="4" class="mb-4 mb-md-0">
                                <p class="text-uppercase font-weight-bold">
                                  Cras justo odio
                                </p>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol 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"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol 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"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol 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"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol col="3">
                                      <img
                                        src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                                        class="img-fluid shadow-1-strong rounded"
                                        alt="Skyscrapers"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                              </MDBCol>
                            </MDBRow>
                          </MDBContainer>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBCollapse>
              </MDBNavbar>
            </section>
            </template>
          
        
    
        
            
          <script>
            import {
              MDBContainer,
              MDBRow,
              MDBCol,
              MDBNavbar,
              MDBNavbarToggler,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBCollapse,
              MDBDropdown,
              MDBDropdownToggle,
              MDBDropdownMenu,
            } from "mdb-vue-ui-kit";
            import { ref } from "vue";
            export default {
              components: {
                MDBContainer,
                MDBRow,
                MDBCol,
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
              },
              setup(){
                const collapse5 = ref(false);
                const dropdown5 = ref(false);
                return {
                  collapse5,
                  dropdown5
                }
              }
            };
          </script>
          
        
    

Big news

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

        
            
          <template>
            <section
              class="w-100 p-4"
              style="background-color: #eee; border-radius: 0.5rem 0.5rem 0 0"
            >
              <MDBNavbar
                container
                expand="lg"
                light
                bg="light"
                id="referenceTarget6"
              >
                <MDBNavbarToggler
                  @click="collapse6 = !collapse6"
                  target="#navbarExample6"
                />
                <MDBCollapse v-model="collapse6" id="navbarExample6">
                  <MDBNavbarNav
                    class="me-auto ps-lg-0"
                    style="padding-left: 0.15rem"
                  >
                    <MDBNavbarItem href="#"> Regular link </MDBNavbarItem>
                    <MDBNavbarItem class="position-static">
                      <MDBDropdown
                        class="nav-item"
                        v-model="dropdown6"
                        target="#referenceTarget6"
                      >
                        <MDBDropdownToggle
                          id="navbarDropdown6"
                          tag="a"
                          class="nav-link"
                          @click="dropdown6 = !dropdown6"
                          >Mega menu</MDBDropdownToggle
                        >
                        <MDBDropdownMenu
                          tag="div"
                          class="w-100 mt-0"
                          aria-labelledby="navbarDropdown6"
                          style="
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                          "
                        >
                          <MDBContainer>
                            <MDBRow class="row">
                              <MDBCol md="4" class="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
                                    mb-4
                                  "
                                  v-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"
                                    ><MDBIcon icon="plane" class="pe-1"></MDBIcon
                                    >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>
                              </MDBCol>
                              <MDBCol md="4" class="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
                                    mb-4
                                  "
                                  v-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"
                                    ><MDBIcon
                                      icon="chart-pie"
                                      class="pe-1"
                                    ></MDBIcon
                                    >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>
                              </MDBCol>
                              <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
                                    mb-4
                                  "
                                  v-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"
                                    ><MDBIcon icon="code" class="pe-1"></MDBIcon
                                    >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>
                            </MDBRow>
                          </MDBContainer>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBCollapse>
              </MDBNavbar>
            </section>
            </template>
          
        
    
        
            
          <script>
            import {
              MDBContainer,
              MDBRow,
              MDBCol,
              MDBNavbar,
              MDBNavbarToggler,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBCollapse,
              MDBDropdown,
              MDBDropdownToggle,
              MDBDropdownMenu,
              MDBIcon,
              mdbRipple
            } from "mdb-vue-ui-kit";
            import { ref } from "vue";
            export default {
              components: {
                MDBContainer,
                MDBRow,
                MDBCol,
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBIcon,
                mdbRipple
              },
              directives: {
                mdbRipple
              },
              setup(){
                const collapse6 = ref(false);
                const dropdown6 = ref(false);
                return {
                  collapse6,
                  dropdown6
                }
              }
            };
          </script>
          
        
    

Mixed media

        
            
          <template>
            <section
              class="w-100 p-4"
              style="background-color: #eee; border-radius: 0.5rem 0.5rem 0 0"
            >
              <MDBNavbar
                container
                expand="lg"
                light
                bg="light"
                id="referenceTarget7"
              >
                <MDBNavbarToggler
                  @click="collapse7 = !collapse7"
                  target="#navbarExample7"
                />
                <MDBCollapse v-model="collapse7" id="navbarExample7">
                  <MDBNavbarNav
                    class="me-auto ps-lg-0"
                    style="padding-left: 0.15rem"
                  >
                    <MDBNavbarItem href="#"> Regular link </MDBNavbarItem>
                    <MDBNavbarItem class="position-static">
                      <MDBDropdown
                        class="nav-item"
                        v-model="dropdown7"
                        target="#referenceTarget7"
                      >
                        <MDBDropdownToggle
                          id="navbarDropdown7"
                          tag="a"
                          class="nav-link"
                          @click="dropdown7 = !dropdown7"
                          >Mega menu</MDBDropdownToggle
                        >
                        <MDBDropdownMenu
                          tag="div"
                          class="w-100 mt-0"
                          aria-labelledby="navbarDropdown7"
                          style="
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                          "
                        >
                          <MDBContainer>
                            <MDBRow class="my-4">
                              <MDBCol md="12" xl="6" class="mb-4 col-lg-0">
                                <p
                                  class="
                                    text-uppercase
                                    font-weight-bold
                                    text-center
                                    d-flex
                                    justify-content-center
                                    align-items-center
                                  "
                                >
                                  Iste quaerato
                                  <MDBBadge
                                    color="danger"
                                    class="shadow-1-strong ms-2"
                                    >News of the day</MDBBadge
                                  >
                                </p>
                                <MDBRow class="gx-4">
                                  <MDBCol md="6" class="mb-4">
                                    <div
                                      class="
                                        bg-image
                                        hover-overlay
                                        ripple
                                        rounded
                                        shadow-2-strong
                                      "
                                      v-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>
                                  </MDBCol>
                                  <MDBCol md="6" class="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>
                                  </MDBCol>
                                </MDBRow>
                              </MDBCol>
                              <MDBCol md="6" xl="3" class="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
                                    mb-4
                                  "
                                  v-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"
                                    ><MDBIcon icon="plane" class="pe-1"></MDBIcon
                                    >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>
                              </MDBCol>
                              <MDBCol md="6" xl="3">
                                <p class="text-uppercase font-weight-bold">
                                  Explicabo voluptas
                                </p>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol 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"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol 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"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol 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"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                                <a href="" class="text-dark">
                                  <MDBRow class="mb-4 border-bottom pb-2">
                                    <MDBCol col="3">
                                      <img
                                        src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                                        class="img-fluid shadow-1-strong rounded"
                                        alt="Skyscrapers"
                                      />
                                    </MDBCol>
                                    <MDBCol col="9">
                                      <p class="mb-2">
                                        <strong>Lorem ipsum dolor sit amet</strong>
                                      </p>
                                      <p><u>15.07.2020</u></p>
                                    </MDBCol>
                                  </MDBRow>
                                </a>
                              </MDBCol>
                            </MDBRow>
                          </MDBContainer>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBCollapse>
              </MDBNavbar>
            </section>
          </template>
          
        
    
        
            
          <script>
            import {  
              MDBContainer,
              MDBRow,
              MDBCol,
              MDBNavbar,
              MDBNavbarToggler,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBCollapse,
              MDBDropdown,
              MDBDropdownToggle,
              MDBDropdownMenu,
              MDBBadge,
              mdbRipple
            } from "mdb-vue-ui-kit";
            import { ref } from "vue";
            export default {
              components: {
                MDBContainer,
                MDBRow,
                MDBCol,
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBBadge
              },
              directives: {
                mdbRipple
              },
              setup(){
                const collapse7 = ref(false);
                const dropdown7 = ref(false);
                return {
                  collapse7,
                  dropdown7
                }
              }
            };
          </script>
          
        
    

Dropdown on hover

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

        
            
          <template>
            <section
              class="w-100 p-4"
              style="background-color: #eee; border-radius: 0.5rem 0.5rem 0 0"
            >
              <MDBNavbar container expand="lg" light bg="light">
                  <MDBNavbarToggler
                    @click="collapse8 = !collapse8"
                    target="#navbarExample8"
                  />
                  <MDBCollapse v-model="collapse8" id="navbarExample8">
                    <MDBNavbarNav
                      class="me-auto ps-lg-0"
                      style="padding-left: 0.15rem"
                    >
                      <MDBNavbarItem href="#"> Regular link </MDBNavbarItem>
                      <MDBDropdown
                        class="nav-item position-static"
                        v-model="dropdown8"
                        @mouseenter="dropdown8 = true"
                        @mouseleave="dropdown8 = false"
                      >
                        <MDBDropdownToggle
                          id="navbarDropdown8"
                          tag="a"
                          class="nav-link"
                          >Mega menu</MDBDropdownToggle
                        >
                        <MDBDropdownMenu
                          tag="div"
                          class="w-100 mt-0"
                          aria-labelledby="navbarDropdown7"
                          style="
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                          "
                          @mouseenter="dropdown8 = true"
                          @mouseleave="dropdown8 = false"
                        >
                          <MDBContainer>
                            <MDBRow class="my-4">
                              <MDBCol md="6" lg="3" class="mb-3 mb-lg-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Lorem ipsum</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Dolor sit</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Amet consectetur</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Adipisicing elit</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" lg="3" class="mb-3 mb-lg-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Explicabo voluptas</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Perspiciatis quo</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Laudantium maiores</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Provident dolor</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" lg="3" class="mb-3 mb-md-0">
                                <MDBListGroup flush>
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Iste quaerato</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Est iure</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Praesentium</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Laboriosam</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                              <MDBCol md="6" lg="3">
                                <MDBListGroup flush>
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cras justo odio</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Saepe</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Vel alias</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Sunt doloribus</MDBListGroupItem
                                  >
                                  <MDBListGroupItem tag="a" href="#" action
                                    >Cum dolores</MDBListGroupItem
                                  >
                                </MDBListGroup>
                              </MDBCol>
                            </MDBRow>
                          </MDBContainer>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBNavbar>
              </section>
            </template>
          
        
    
        
            
          <script>
            import {
              MDBContainer,
              MDBRow,
              MDBCol,
              MDBNavbar,
              MDBNavbarToggler,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBCollapse,
              MDBDropdown,
              MDBDropdownToggle,
              MDBDropdownMenu,
              MDBListGroup,
              MDBlistGroupItem
            } from "mdb-vue-ui-kit";
            import { ref } from "vue";
            export default {
              components: {
                MDBContainer,
                MDBRow,
                MDBCol,
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBListGroup,
                MDBlistGroupItem
              },
              setup(){
                const collapse8 = ref(false);
                const dropdown8 = ref(false);
                return {
                  collapse8,
                  dropdown8
                }
              }
            };
          </script>