Menus

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

Usage

There are three main ways that menus can be defined in markup.

The first one is by using the activator slot. Don't forget to bind the slot props to the activating element.

The second one is by using the activator prop with value parent. This will turn the parent element of the menu into the activator.

The third one is to supply a CSS selector string to activator prop. This allows you to place the menu and its activator in separate parts of the markup.

API

Component	Description
v-menu	Primary Component
v-btn	Sub-component often used for the v-menu activator
v-list-item	Sub-component often used for the v-menu content

Examples

Props

Location

Menu can be offset relative to the activator by using the location prop. Read more about location here.

Open on hover

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

Slots

Activator and tooltip

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.

INFO

This same syntax is used for other nested activators such as v-dialog with v-tooltip

Misc

Transitions

Vuetify comes with several standard transitions that you can use. 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.

Use In components

Menus can be placed within almost any component.