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>Related resources
Also, if you want to support our friends from TW Elements you can also check out the Mega Menu documentation.