Introduction
Getting started
Features
Styles and animations
UI Components
Alerts
Application
Aspect ratios
Avatars
Badges
Banners
Bars
Bottom navigation
Bottom sheets
Breadcrumbs
Buttons
Buttons: Floating Action Button
Calendars
Cards
Carousels
Chips
Dialogs
Dividers
Expansion panels
Footers
Form inputs & controls
Grid system
Groups
Hover
Icons
Images
Lazy
Lists
Menus
Navigation drawers
Overlays
Pagination
Parallax
Pickers
Progress
Ratings
Sheets
Skeleton loaders
Snackbars
Sparklines
Steppers
Subheaders
Tables
Tabs
Timelines
Tooltips
Treeview
Virtual scroller
API
Directives
Resources
About

# 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.
Dialogs
Components
Tooltips
Components
Transitions
Styles

← Lists
Navigation drawers →
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
Become a sponsor
Close

New content is available. Click Refresh to update.

Settings
Theme
Light
Dark
System
Mixed

Drawer navigation grouping
Standard
Alpha

Direction
LTR
RTL