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.
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.
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.
Sizing and styling
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.
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
In the example below there’s a few transitions showcased. For a full list of transitions available, go to Transitions.
The example below shows how to create a re-usable menu that can be shared with different targets.
The position of QMenu can be customized. It keeps account of the
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
end when you want to automatically take into account if on RTL or non-RTL.
end mean “left” for non-RTL and “right” for RTL.
<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>