​

Latest release:
v2.6.15

# Menus

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

# Usage

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


# API

  • v-menu

# Examples

# Props

# Absolute

Menus can also be placed absolutely on top of the activator element using the absolute prop. Try clicking anywhere on the image.


# Absolute 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.


# 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.


# Disabled

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


# Offset x

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


# Offset y

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


# Open on hover

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


# Rounded

Menus can have their border-radius set by the rounded prop. Additional information about rounded classes is on the Border Radius page.


# 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. Note: this same syntax is used for other nested activators such as v-dialog w/ 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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.

Edit this page on GitHub
Last updated:07/05/2020, 7:18:50 PM
Contents
  • Usage
  • API
  • Examples
  • Props
  • Absolute
  • Absolute without activator
  • Close on click
  • Close on content click
  • Disabled
  • Offset x
  • Offset y
  • Open on hover
  • Rounded
  • Slots
  • Activator and tooltip
  • Misc
  • Custom transitions
  • Popover menu
  • Use In components
  • Accessibility
Close

New content is available. Click Refresh to update.

Settings
Theme
Light
Dark
System
Mixed

Drawer navigation grouping
Standard
Alpha

Direction
LTR
RTL

API
Link Only
Inline