Skip to content
Glint UI

ContextMenu

A right-click context menu anchored to the pointer, with keyboard shortcuts, checkable items, and nested submenus.

Usage

import { ContextMenu } from "@glint/components/context-menu.slint";


export component AppWindow inherits Window {
    VerticalLayout {
        alignment: center;


        menu := ContextMenu {
            items: [
                { label: "Cut" },
                { label: "Copy" },
                { label: "Paste" },
            ];
            selected(row, child) => {
                // handle choice
            }


            Rectangle {
                width: 300px;
                height: 150px;
                // your right-clickable canvas or content
            }
        }
    }
}

ContextMenu wraps an interactive region in its @children slot. Right-clicking anywhere within that area captures the pointer coordinate and opens the menu popup powered by MenuPanel anchored to the cursor location.

The menu dismisses on click-outside or when Escape is pressed. Calling show() programmatically opens the menu at the last known pointer position or the area’s top-left corner.

Examples

Submenus open beside the parent row. Use submenu-side (PanelSide.right, PanelSide.left) and submenu-align (PanelAlign.start, PanelAlign.center, PanelAlign.end) to configure placement.

Checkable options and radio groups

Items can act as toggleable checkboxes or mutually exclusive radio choices. Group headers and separators follow the unified grouped rows model. Activating a checkbox toggles its state, while choosing a radio option clears other options sharing the same radio-group.

Programmatic keyboard opening

Calling show() opens the context menu for keyboard users. You can bind show() to application keyboard shortcuts or dedicated context menu keys.

API Reference

Properties

PropertyTypeDefaultDescription
itemsin-out [MenuEntry]no defaultMenu rows shown on right-click. in-out because activating a checkbox or radio row writes its new checked back here.
min-content-widthin length200pxThe floor under the popup panel's width; the panel grows past it to fit its widest row, icon and shortcut hint included.
submenu-sidein PanelSidePanelSide.rightWhere a row's submenu panel opens: which side of the menu, and how it lines up against the row it hangs off. A submenu opens beside its row, so top and bottom read as right.
submenu-alignin PanelAlignPanelAlign.start
highlighted-indexin-out int0Row highlighted by ↑/↓ inside the open menu; consumers rarely set this.
is-openout boolno defaultTrue while the menu is on screen; mirrors PopupWindow.is-open.
menu-xin-out lengthno defaultInternal — where the menu opens horizontally (set on right-click).
menu-yin-out lengthno defaultInternal — where the menu opens vertically (set on right-click).

Callbacks

CallbackDescription
selected(int , int)Fired with the chosen row's index, and with the index of the submenu leaf that was taken or -1 when the row itself was; the menu auto-closes.

Functions

FunctionDescription
show()Opens the menu with the highlight back at the top. Mirrors PopupWindow.show() — the keyboard path into a menu that otherwise only the right mouse button reaches.
close()Closes the menu. Mirrors PopupWindow.close().

Enums

EnumValues
PanelSidetop, right, bottom, left
PanelAlignstart, center, end

Accessibility

  • Pointer location. The context menu positions its floating surface at the right-click pointer coordinates while remaining clamped within window bounds.
  • Accessible list. The menu is reported as an accessible list structure containing individual list items with index information.
  • Keyboard operation. When opened via keyboard show(), focus lands on the first item. ↑/↓ navigate, → enters submenus, ← returns to the parent menu, and Escape closes the menu.
  • State indicators. Checked states on toggleable and radio options are announced directly to assistive technologies.