Skip to content

ContextMenuArea

Use the non-visual ContextMenuArea element to declare an area where the user can show a context menu.

The context menu is shown if the user right-clicks on the area covered by the ContextMenuArea element, or if the user presses the “Menu” key on their keyboard while a FocusScope within the ContextMenuArea has focus. On Android, the menu is shown with a long press. Call the show() function on the ContextMenuArea element to programmatically show the context menu.

One of the children of the ContextMenuArea must be a Menu element, which defines the menu to be shown. There can be at most one Menu child, all other children must be of a different type and will be shown as regular visual children. Define the structure of the menu by placing MenuItem or Menu elements inside that Menu.

Call this function to programmatically show the context menu at the given position relative to the ContextMenuArea element.

Close the context menu if it’s currently open.

Place the Menu element in a MenuBar, a ContextMenuArea, or within another Menu. Use MenuItem children of individual menu items, Menu children to create sub-menus, and MenuSeparator to create separators.

string default: ""

This is the label of the menu as written in the menu bar or in the parent menu.

bool default: true

When disabled, the Menu can be selected but not activated.

A MenuItem represents a single menu entry. It’s must be a child of a Menu element.

string default: ""

The title shown for this menu item.

bool default: true

When disabled, the MenuItem can be selected but not activated.

Invoked when the menu entry is activated.

A MenuSeparator represents a separator in a menu. It cannot have children, and doesn’t have properties or callbacks. MenuSeparator at the beginning or end of a menu will not be visible. Consecutive MenuSeparators will be merged into one.

export component Example {
ContextMenuArea {
Menu {
MenuItem {
title: @tr("Cut");
activated => { debug("Cut"); }
}
MenuItem {
title: @tr("Copy");
activated => { debug("Copy"); }
}
MenuItem {
title: @tr("Paste");
activated => { debug("Paste"); }
}
MenuSeparator {}
Menu {
title: @tr("Find");
MenuItem {
title: @tr("Find Next");
}
MenuItem {
title: @tr("Find Previous");
}
}
}
}
}
slint

© 2025 SixtyFPS GmbH