Popup Menu

Open a command menu from a trigger.

Try it

Interact with the control below. This preview runs the exact code sample shown on this page.

Open example separately ↗

Basic use

Radix · integration snippet
use gpui::{Context};
use xgpui_luma_look_radix as radix;
use xgpui_luma::infra::menu_item::MenuItem;
use xgpui_luma::infra::presenter::HasPresenter;

struct Example {
    control: gpui::Entity<xgpui_luma::controls::popup_menu::PopupMenu>,
    last_action: String,
}

impl Example {
    fn new(cx: &mut Context<Self>) -> Self {
        let control = radix::PopupMenu::new("example")
            .label("Actions")
            .item(MenuItem::new("save").label("Save"))
            .on_select(cx, |app, item_id, _, cx| {
                app.last_action = item_id.to_string();
                cx.notify();
            })
            .spawn(cx);

        Self { control, last_action: String::new() }
    }
}

Integration snippet, checked against the current SDK and Radix crates. cx is the initialized owner context. The control retains its callbacks; callback owners are held weakly. Render self.control.clone() in the owner’s view.

SDK behavior & customization

Menu Select events identify an action. Split Button uses this same engine with an action face.

Relevant contracts: PopupMenuRenderModel, PopupMenuTemplateHandlers, PopupMenuTemplateModifier, PopupMenuTemplate.

Use the module’s template contract for structural changes. Builder modifiers and item templates vary by control.

Events

Callbacks follow the existing SDK event stream. Registrations append, hold the owner weakly, and live until the control is released. cx.notify() requests an owner redraw. Compound payloads are borrowed; scalar values are passed by value.

Event / payloadCallback
ActionClick.on_action_click(cx, |app, cx| { … })
Select { item_id: SharedString, label: SharedString }.on_select(cx, |app, item_id, label, cx| { … })
OpenChanged { open: bool }.on_open_changed(cx, |app, open, cx| { … })
Dismiss.on_dismiss(cx, |app, cx| { … })
FocusChanged { focused: bool }.on_focus_changed(cx, |app, focused, cx| { … })
HoverChanged { hovered: bool }.on_hover_changed(cx, |app, hovered, cx| { … })
EnabledChanged { enabled: bool }.on_enabled_changed(cx, |app, enabled, cx| { … })

Use .on_event(cx, |app, event, cx| { … }) for all events. Factory-created controls support the same callbacks through PopupMenuEventExt. Existing cx.subscribe observers remain supported.

Source

SDK module · Radix adapter