Context Menu     

This component allows you to display a context menu (popup) instead of the default browser one when user performs a right-click (or long tap on touch capable devices).


Edit /quasar.conf.js:

framework: {
components: ['QContextMenu'],
directives: ['CloseOverlay']

Basic Usage

Context menus can contain anything. In the example below, we display a menu.

<q-list link separator style="min-width: 150px; max-height: 300px;">
<q-item v-close-overlay @click.native="showToast()">
<q-item-main label="Label" sublabel="Value" />

<q-item v-close-overlay @click.native="showOtherToast()">
<q-item-main label="Other Label" sublabel="Other Value" />

The position of the popup is calculated so that it will be displayed on the available screen real estate, switching sides (right/left and/or top/bottom) when necessary.
Clicking/Tapping outside of the popup will close the Context Menu.

Notice the “v-close-overlay” directive. When applied to any element within a popup (Popover, Modal) like in this case, it closes it.

When on a mobile app and user hits the phone/tablet back button, the Context Menu will get closed automatically.
When on a desktop browser and user hits the <ESCAPE> key, the Context Menu will get close automatically.

Vue Properties

Vue PropertyTypeDescription
disableBooleanDisabled or not

QContextMenu also supports a Boolean ‘v-model’ which controls the open/close state.

Vue Methods

Vue MethodDescription
show()Open Context Menu
hide()Close Context Menu

Vue Events

Vue MethodDescription
@showTriggered when showing up.
@hideTriggered when closing/hiding.