The v-menu component shows a menu at the position of the element used to activate it.
Select your desired component from below and see the available props, slots, events and functions.
Applies position: absolute to the component.
Designate a custom activator when the activator slot is not used. String can be any valid querySelector and Object can be any valid Node.
Removes overflow re-positioning for the content
Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This will attach to the root v-app component by default.
Centers list on selected element
Aligns the component towards the bottom.
Milliseconds to wait before closing component. Only works with the open-on-hover prop
Designates if menu should close on outside-activator click
Designates if menu should close when its content is clicked
Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the v-app component (unless the attach prop is provided) and is not targettable by classes passed directly on the component.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Removes all keyboard interaction
Disables the menu
Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
Applies position: fixed to the component.
Detaches the menu content inside of the component as opposed to the document.
Aligns the component towards the left.
Applies the light theme variant to the component.
Sets the max height of the menu content
Sets the maximum width for the content
Sets the minimum width for the content
Nudge the content to the bottom
Nudge the content to the left
Nudge the content to the right
Nudge the content to the top
Nudge the content width
Causes the component to flip to the opposite side when repositioned due to overflow
Offset the menu on the x-axis. Works in conjunction with direction left/right
Offset the menu on the y-axis. Works in conjunction with direction top/bottom
Milliseconds to wait before opening component. Only works with the open-on-hover prop
Designates whether menu should open on activator click
Designates whether menu should open on activator hover
Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin.
Used to position the content when not using an activator slot
Used to position the content when not using an activator slot
The value that is updated when the menu is closed - must be primitive. Dot notation is supported
Aligns the component towards the right.
Designates the border-radius applied to the component. You can find more information on the Border Radius page.
Removes the component's border-radius.
Aligns the content towards the top.
Sets the component transition. Can be one of the built in transitions or one your own.
Controls whether the component is visible or hidden.
The z-index used for the component
When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation
{
attrs: { role: string, aria-haspopup: boolean, aria-expanded: string }
on: { [eventName]: eventHandler }
value: boolean
}The default Vue slot.
$border-radius-root !default;8 !default;Below is a collection of simple to complex examples.
Menus can also be placed absolutely on top of the activator element using the absolute prop. Try 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.
Menus can be accessed using hover instead of clicking with the open-on-hover prop.
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.
You can disable the menu. Disabled menus can't be opened.
Menu can be offset by the X axis to make the activator visible.
Menu can be offset by the Y axis to make the activator visible.
Menus can have their border-radius set by the rounded prop. Additional information about rounded classes is on the Border Radius page.
Menu can be closed when lost focus.
You can configure whether v-menu should be closed when its content is clicked.
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.
Menus can be placed within almost any component.
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.
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.