Usage

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

API

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.

Hover

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

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.

Disabled

You can disable the menu. Disabled menus can't be opened.

X offset

Menu can be offset by the X axis to make the activator visible.

Y offset

Menu can be offset by the Y axis to make the activator visible.

Close on click

Menu can be closed when lost focus.

Close on content click

You can configure whether v-menu should be closed when its content is clicked.

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.

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 on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise