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.
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
WARNING
If you want to conditionally activate or de-activate a QMenu, please use v-if on it instead of v-show.
Submenus
Sizing and styling
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.
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:
Transitions
In the example below there’s a few transitions showcased. For a full list of transitions available, go to Transitions.
Reusable
The example below shows how to create a re-usable menu that can be shared with different targets.
Positioning
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.
For horizontal positioning you can use start and end when you want to automatically take into account if on RTL or non-RTL. start and end mean “left” for non-RTL and “right” for RTL.
TIP
The offset prop is applied to the anchor element’s bounding box, and only then is the final position clamped to the available screen real estate. As a result, a large offset — or anchoring QMenu to a full-width / screen-edge element — can push the popup against a viewport edge, where it gets clamped and the offset appears to have no effect (the clamped position then becomes independent of the offset value). If an offset seems to be ignored on one axis, make sure the chosen anchor/self lets the popup expand into free space on that axis — for example, attach QMenu to an inline / inline-block trigger rather than to a full-width block element.
<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>