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 readNavbar Docs.
Basic example
A basicdropdown mega menu inside of aBootstrap 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 differenttypography 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
Uselist group orlist 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 andBootstrap 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 utilizingmedia 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 onhover.
<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>Related resources
Also, if you want to support our friends from TW Elements you can also check out theMega Menu documentation.