QMenu

The QMenu component is a convenient way to show menus. Goes very well with QList as dropdown content, but it’s by no means limited to it.

Installation


// quasar.conf.js

return {
  framework: {
    // not needed if using auto-import feature:
    components: [
      'QMenu'
    ],
    // not needed if using auto-import feature:
    directives: [
      'ClosePopup'
    ]
  }
}

Usage

The idea with QMenu is to place it inside your DOM element / component that you want to be the trigger as direct child. Don’t worry about QMenu content inheriting CSS from the container as the QMenu will be injected as a direct child of <body> through a Quasar Portal.

TIP

Don’t forget to use the directive v-close-popup in your clickable menu items if you want the menu to close automatically. Alternatively, you can use the QMenu’s property auto-close or handle closing the menu yourself through its v-model.

Basic

Basic



Idea for content



Toggle through v-model



Menus in menus



Sizing and styling

Sizing



Style



Context menu

You can also set QMenu to act as a context menu. On desktop, you need to right click the parent target to trigger it, and on mobile a long tap will do the job.

Context Menu



Persistent

If you want the QMenu to not close if app route changes or if hitting ESCAPE key or if clicking/tapping outside of the menu, then use persistent prop:

Persistent



Transitions

In the example below there’s a few transitions showcased. For a full list of transitions available, go to Transitions.

Transition examples



Reusable

The example below shows how to create a re-usable menu that can be shared with different targets.

Using target



Positioning

Position examples



The position of QMenu can be customized. It keeps account of the anchor and self optional props. The final position of QMenu popup is calculated so that it will be displayed on the available screen real estate, switching to the right-side and/or top-side when necessary.


Fit
Cover
Anchor Origin
Vertical
Top
Center
Bottom
Horizontal
Left
Middle
Right
Self Origin
Vertical
Top
Center
Bottom
Horizontal
Left
Middle
Right

<q-menu anchor="bottom left" self="top left">
  <q-item clickable>
    <q-item-section>New tab</q-item-section>
  </q-item>
  <q-item clickable>
    <q-item-section>New incognito tab</q-item-section>
  </q-item>
</q-menu>

QMenu API