Detailed Description

A Material Design 3 Expressive menu.

Menu presents a temporary list of actions. Action objects declared as children are represented by accessible menu-item delegates with Material typography, selection, icon, shortcut, disabled, pointer, and keyboard-focus states. The default delegate also maps the action's supportingText, trailingText, and badgeContent properties to MenuItem. A custom delegate must map these extended fields explicitly when it needs them. Actions not derived from Action still render their inherited action fields, but the extended fields remain empty.

The surface grows to fit its content between the Material minimum and maximum widths. On compact windows it may become narrower than the preferred minimum, and tall menus are constrained to the available viewport and become scrollable. Logical layout and cascading-menu arrows mirror automatically in right-to-left locales.

Keyboard navigation, focus restoration, menu roles, checked state, and accessible names are provided by Qt Quick Templates. Give every action a short, localized text value so it has a meaningful accessible name.

Vertical menu actions can be organized with MenuDivider and MenuGap. A divider separates action groups within one surface; a gap starts a new elevated surface. MenuSectionLabel adds an optional non-interactive label to the surrounding surface. The same grouping is used whether the menu is opened from an anchor or at a context-menu position.

MD.Menu {
    id: editMenu
 
    MD.Action {
        text: qsTr("Copy")
        icon.name: MD.SymbolNames.symbolContentCopy
        onTriggered: copySelection()
    }
 
    MD.Action {
        text: qsTr("Show formatting")
        checkable: true
        supportingText: qsTr("Use rich text styles")
    }
 
    MD.MenuDivider {}
 
    MD.Action {
        text: qsTr("Select all")
    }
 
    MD.MenuGap {}
    MD.MenuSectionLabel { text: qsTr("Sharing") }
 
    MD.Action {
        text: qsTr("Share")
        trailingText: qsTr("Team")
        badgeContent: qsTr("New")
    }
}

For more information see the Material Design 3 menu guidelines.

Definition at line 73 of file Menu.qml.

The documentation for this class was generated from the following file:

src/controls/qml/components/Menu.qml