QML Menu Element

Provides of a list of options that the user can choose from. More...

Inherits Item

List of all members, including inherited members

Properties

• content : list<Item>
• status : int
• visualParent : Item

Methods

• close
• open

Detailed Description

A Menu is hidden by default and opens in response to a user action. When the user selects an option in the menu, it triggers a command.

Creating a Menu

The code snippet below shows how to create a Menu.

 // define the menu
 Menu {
     id: mainMenu
     // define the items in the menu and corresponding actions
     content: MenuLayout {
         MenuItem {
             text: "Red"
             onClicked: rect.color = "Red"
         }
             ...
     }
 }

Integrating Menu with a Toolbar

The code snippet below shows how the user can launch the menu by pressing the ToolBar's menu button.

 ToolBar {
     id: toolbar
     anchors.bottom: parent.bottom
     tools: ToolBarLayout {
         ToolButton {
             iconSource: "toolbar-back"
         }
         // add the standard menu button to the toolbar
         ToolButton {
             iconSource: "toolbar-menu"
             onClicked: mainMenu.open()
         }
     }
 }

A menu opened from a tool bar

Using Submenus

A Menu can contain submenus that are normally implemented with ContextMenu objects. The code snippet below shows how to define a ContextMenu.

 ContextMenu {
     id: cmykMenu
     MenuLayout {
         MenuItem {
             text: "Cyan"
             onClicked: rect.color = "Cyan"
         }
             ...
     }
 }

You can integrate a submenu to a menu by setting its MenuItem.platformSubItemIndicator property to true. The following code snippet shows how a submenu is integrated to the menu item.

 MenuItem {
     text: "CMYK menu"
     platformSubItemIndicator: true
     onClicked: cmykMenu.open()
 }

Property Documentation

Method Documentation