#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.
This same syntax is used for other nested activators such as v-dialog with v-tooltip
#Misc
#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.
#Use In components
Menus can be placed within almost any component.
#Accessibility
By default, v-menu components are detached and moved to the root of your application. In order to properly support inserting dynamic content into the DOM, you must use the attach prop. This will ensure that focus transfers from the activator to the content when pressing the tab key.