In this tutorial, we will explore how to create dropdown menus using Vuetify.js 3 in Vue.js 3. We’ll cover dropdown menus positioned at the top, bottom, left, and right sides. Before we begin, make sure you’ve installed and configured Vuetify 3 in Vue 3.
How to Install Vuetify 3 in Vue 3
Vuetify 3 Vue 3 Dropdown Menu Example
1. Vuetify 3 Vue 3 basic dropdown menu with activator slots, parent activator, and sibling activator using the v-menu, v-list, and v-btn components.
Vue
<template>
<div class="d-flex justify-space-around">
<v-menu>
<template v-slot:activator="{ props }">
<v-btn color="primary" v-bind="props"> Activator slot </v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index" :value="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-btn color="primary">
Parent activator
<v-menu activator="parent">
<v-list>
<v-list-item
v-for="(item, index) in items"
:key="index"
:value="index"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-btn>
<v-btn id="menu-activator" color="primary"> Sibling activator </v-btn>
<v-menu activator="#menu-activator">
<v-list>
<v-list-item v-for="(item, index) in items" :key="index" :value="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ title: "Click Me" },
{ title: "Click Me" },
{ title: "Click Me" },
{ title: "Click Me 2" },
],
}),
};
</script>
2. Vuetify 3 Vue 3 dropdown menu with top, bottom, left, right, and center locations.
Vue
<template>
<div class="text-center">
<v-select v-model="location" :items="locations" label="Location"></v-select>
<v-menu :location="location">
<template v-slot:activator="{ props }">
<v-btn color="primary" dark v-bind="props">
Dropdown
</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' },
],
locations: [
'top',
'bottom',
'start',
'end',
'center',
],
location: 'end',
}),
}
</script>
3. Vuetify 3 Vue 3 dropdown menu on hover.
Vue
<template>
<div class="text-center">
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn color="primary" v-bind="props">
Dropdown on hover
</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' },
],
}),
}
</script>4. Vuetify 3 Vue 3 dropdown menu with tooltip.
Vue
<template>
<div class="text-center">
<v-menu>
<template v-slot:activator="{ props: menu }">
<v-tooltip location="top">
<template v-slot:activator="{ props: tooltip }">
<v-btn color="primary" v-bind="mergeProps(menu, tooltip)">
Dropdown w/ Tooltip
</v-btn>
</template>
<span>I'm A Tooltip</span>
</v-tooltip>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
import { mergeProps } from 'vue'
export default {
data: () => ({
items: [
{ title: 'Click Me1' },
{ title: 'Click Me2' },
{ title: 'Click Me3' },
{ title: 'Click Me4' },
],
}),
methods: {
mergeProps,
},
}
</script>5. Vuetify 3 Vue 3 dropdown menu with custom transitions.
Vue
<template>
<div class="d-flex justify-space-around">
<v-menu transition="scale-transition">
<template v-slot:activator="{ props }">
<v-btn color="primary" v-bind="props">
Scale Transition
</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-menu transition="slide-x-transition">
<template v-slot:activator="{ props }">
<v-btn color="primary" v-bind="props">
Slide X Transition
</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-menu transition="slide-y-transition">
<template v-slot:activator="{ props }">
<v-btn color="primary" v-bind="props">
Slide Y Transition
</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' },
],
}),
}
</script>
6. Vuetify 3 Vue 3 popover dropdown menu.
Vue
<template>
<div class="text-center">
<v-menu v-model="menu" :close-on-content-click="false" location="end">
<template v-slot:activator="{ props }">
<v-btn color="indigo" v-bind="props">
Menu as Popover
</v-btn>
</template>
<v-card min-width="300">
<v-list>
<v-list-item prepend-avatar="https://cdn.vuetifyjs.com/images/john.jpg" title="John Leider"
subtitle="Founder of Vuetify">
<template v-slot:append>
<v-btn variant="text" :class="fav ? 'text-red' : ''" icon="mdi-heart" @click="fav = !fav"></v-btn>
</template>
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-list>
<v-list-item>
<v-switch v-model="message" color="purple" label="Enable messages" hide-details></v-switch>
</v-list-item>
<v-list-item>
<v-switch v-model="hints" color="purple" label="Enable hints" hide-details></v-switch>
</v-list-item>
</v-list>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn variant="text" @click="menu = false">
Cancel
</v-btn>
<v-btn color="primary" variant="text" @click="menu = false">
Save
</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</div>
</template>
<script>
export default {
data: () => ({
fav: true,
menu: false,
message: false,
hints: true,
}),
}
</script>
Javed sheikh
Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,
