Menus

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

Basic

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

Custom transitions

Vuetify comes with 3 standard transitions, scale, slide-x and slide-y. Use transition prop to add transition to a menu.

Location

Menu can be offset relative to the activator by using the location prop.

Open on hover

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

Popover

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.

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

CONTENTS

  • Introduction

  • Basic

  • Custom transitions

  • Location

  • Open on hover

  • Popover

  • Activator and tooltip