Menu

The v-menu component shows a menu at the position of the element used to activate it.

Usage

Remember to put the element that activates the menu in the activator slot.

API

v-menu
Name
absolute
Default
false
Type
boolean

Components.Menus.

Name
activator
Default
undefined
Type
any

Components.Menus.

Name
allow-overflow
Default
false
Type
boolean

Components.Menus.

Name
attach
Default
false
Type
any

Components.Menus.

Name
auto
Default
false
Type
boolean

Components.Menus.

Name
bottom
Default
false
Type
boolean

Components.Menus.

Name
close-delay
Default
0
Type
number | string

Components.Menus.

Name
close-on-click
Default
true
Type
boolean

Components.Menus.

Name
close-on-content-click
Default
true
Type
boolean

Components.Menus.

Name
content-class
Default
undefined
Type
any

Components.Menus.

Name
dark
Default
false
Type
boolean

Components.Menus.

Name
disable-keys
Default
false
Type
boolean

Components.Menus.

Name
disabled
Default
false
Type
boolean

Components.Menus.

Name
fixed
Default
false
Type
boolean

Components.Menus.

Name
full-width
Default
false
Type
boolean

Components.Menus.

Name
input-activator
Default
false
Type
boolean

Components.Menus.

Name
lazy
Default
false
Type
boolean

Components.Menus.

Name
left
Default
false
Type
boolean

Components.Menus.

Name
light
Default
false
Type
boolean

Components.Menus.

Name
max-height
Default
auto
Type
any

Components.Menus.

Name
max-width
Default
auto
Type
number | string

Components.Menus.

Name
min-width
Default
undefined
Type
number | string

Components.Menus.

Name
nudge-bottom
Default
0
Type
number | string

Components.Menus.

Name
nudge-left
Default
0
Type
number | string

Components.Menus.

Name
nudge-right
Default
0
Type
number | string

Components.Menus.

Name
nudge-top
Default
0
Type
number | string

Components.Menus.

Name
nudge-width
Default
0
Type
number | string

Components.Menus.

Name
offset-overflow
Default
false
Type
boolean

Components.Menus.

Name
offset-x
Default
false
Type
boolean

Components.Menus.

Name
offset-y
Default
false
Type
boolean

Components.Menus.

Name
open-delay
Default
0
Type
number | string

Components.Menus.

Name
open-on-click
Default
true
Type
boolean

Components.Menus.

Name
open-on-hover
Default
false
Type
boolean

Components.Menus.

Name
origin
Default
'top left'
Type
string

Components.Menus.

Name
position-x
Default
undefined
Type
number

Components.Menus.

Name
position-y
Default
undefined
Type
number

Components.Menus.

Name
return-value
Default
undefined
Type
any

Components.Menus.

Name
right
Default
false
Type
boolean

Components.Menus.

Name
top
Default
false
Type
boolean

Components.Menus.

Name
transition
Default
v-menu-transition
Type
boolean | string

Components.Menus.

Name
value
Default
undefined
Type
any

Components.Menus.

Name
z-index
Default
undefined
Type
number | string

Components.Menus.

Examples

Absolute position

Menus can also be placed absolutely on top of the activator element using the absolute prop. Try clicking anywhere on the image.

Absolute position without activator

Menus can also be used without an activator by using absolute together with the props position-x and position-y. Try right-clicking anywhere on the image.

With the new v-slot syntax, nested activators such as those seen with a v-menu and v-tooltip attached to the same activator button, need a particular setup in order to function correctly. Note: this same syntax is used for other nested activators such as v-dialog w/ v-tooltip.

Hover

Menus can be accessed using hover instead of clicking with the open-on-hover prop.

Menus can be placed within almost any component.

Custom transitions

Vuetify comes with 3 standard transitions, scale, slide-x and slide-y. You can also create your own and pass it as the transition argument. For an example of how the stock transitions are constructed, visit here.

Popover menu

A menu can be configured to be static when opened, allowing it to function as a popover. This can be useful when there are multiple interactive items within the menu contents.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore