ContextMenu QML Type

The ContextMenu attached type provides a way to open a context menu in a platform-appropriate manner. More...

• List of all members, including inherited members

Properties

• menu : Menu

Signals

• requested(point position)

Detailed Description

ContextMenu can be attached to any item in order to show a context menu upon a platform-specific event, such as a right click or the context menu key.

 Pane {
     anchors.fill: parent

     ContextMenu.menu: Menu {
         MenuItem {
             text: qsTr("Eat Tomato")
             onTriggered: { /* ... */ }
         }
         MenuItem {
             text: qsTr("Throw Tomato")
             onTriggered: { /* ... */ }
         }
         MenuItem {
             text: qsTr("Squash Tomato")
             onTriggered: { /* ... */ }
         }
     }
 }

Sharing context menus

It's possible to share a Menu amongst several attached context menu objects. This allows reusing a single Menu when the items that need context menus have data in common. For example:

 pragma ComponentBehavior: Bound

 import QtQuick
 import QtQuick.Controls.Basic
 import QtQuick.Templates as T

 ApplicationWindow {
     width: 600
     height: 400
     visible: true

     component Tomato: Label {
         id: tomato
         objectName: text
         horizontalAlignment: Label.AlignHCenter
         verticalAlignment: Label.AlignVCenter
         width: Math.max(200, contentWidth * 1.5, contentWidth * 1.5)
         height: width
         color: skinColor

         function eat() { print("Ate " + text) }
         function ditch() { print("Threw " + text) }
         function squash() { print("Squashed " + text) }

         property color skinColor: "tomato"

         background: Rectangle {
             color: tomato.skinColor
             radius: width / 2
         }

         ContextMenu.menu: contextMenu
     }

     Menu {
         id: contextMenu

         readonly property Tomato triggerItem: parent as Tomato
         readonly property string triggerItemText: triggerItem?.text ?? ""

         MenuItem {
             text: qsTr("Eat %1").arg(contextMenu.triggerItemText)
             onTriggered: contextMenu.triggerItem.eat()
         }
         MenuItem {
             text: qsTr("Throw %1").arg(contextMenu.triggerItemText)
             onTriggered: contextMenu.triggerItem.ditch()
         }
         MenuItem {
             text: qsTr("Squash %1").arg(contextMenu.triggerItemText)
             onTriggered: contextMenu.triggerItem.squash()
         }
     }

     Row {
         anchors.centerIn: parent

         Tomato {
             text: qsTr("tomato")
         }

         Tomato {
             text: qsTr("really ripe tomato")
             skinColor: "maroon"
         }
     }
 }

Performance

ContextMenu lazily creates its Menu only when it's requested. If it wasn't for this optimization, the Menu would be created when the containing component is being loaded, which is typically at application startup.

It is recommended not to give the Menu assigned to ContextMenu's menu property an id when it's defined where it's assigned. Doing so prevents this optimization. For example:

 Pane {
     anchors.fill: parent

     ContextMenu.menu: Menu {
         // This prevents lazy creation of the Menu.
         id: myMenu

         // ...
     }
 }

The example in the Sharing context menus section works because the Menu is defined separately from its assignment.

Interaction with other menus

If a Menu is opened via e.g. a TapHandler or other means, ContextMenu will not open at the same time. This allows legacy applications that were written before ContextMenu was introduced to continue working as expected.

Property Documentation

Signal Documentation

 Button {
     id: button
     text: qsTr("Click me!")
     ContextMenu.onRequested: position => {
         const menu = buttonMenu.createObject(button)
         menu.popup(position)
     }
 }

 Component {
     id: buttonMenu
     Menu {
         MenuItem { text: qsTr("Open") }
     }
 }