#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.
#Nested menus
Menus with other menus inside them will not close until their children are closed. The submenu prop changes keyboard behaviour to open and close with left/right arrow keys instead of up/down.
#Positioning Menus with Coordinates
v-menu can be positioned relative to a DOM element or explicit [x, y] coordinates.
- The most common use case is to pass an event target element. This allows the menu to anchor itself to the element that was clicked.
- You can also use
[x, y]screen coordinates, though this is less common and typically used for context menus. :offsetis used to shift the menu position relative to its anchor, not to define an absolute position.- Any DOM event with
clientXandclientYcan be used (e.g.click,contextmenu).
#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
#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.
#Gliding navigation
A single v-menu can be reused across multiple activators to create a gliding navigation bar. As the user hovers between buttons, the menu smoothly transitions to the new activator using a CSS transition on its position.
#Use In components
Menus can be placed within almost any component.