Dropdown Menu

A menu of actions triggered by a button, positioned at a given coordinate.

When to use

• Offering a set of actions from a trigger button.
• Building user menus (Profile, Settings, Log out).

API

DropdownMenu::new(id, position)

Creates a dropdown menu at the given Point<Pixels> position.

Method	Type	Default	Description
.item(label, on_click)	impl Into<SharedString>, Fn(&ClickEvent, &mut Window, &mut App)	—	Add a clickable item
.separator()	—	—	Add a thin divider
.on_close(fn)	Fn(&ClickEvent, &mut Window, &mut App)	—	Click-away close handler
.focus_handle(&handle)	&FocusHandle	—	Focus handle (enables keyboard activation with Space/Enter)

Usage

use gpui::{Component, div, prelude::*};
use components::DropdownMenu;

if this.menu_open {
    div().child(Component::new(
        DropdownMenu::new("user-menu", this.menu_position)
            .item("Profile", cx.listener(|this, _, _, cx| { /* ... */ }))
            .separator()
            .item("Logout", cx.listener(|this, _, _, cx| { /* ... */ }))
            .on_close(cx.listener(|this, _, _, cx| {
                this.menu_open = false;
                cx.notify();
            })),
    ))
}

Copy the source

crates/components/src/dropdown_menu.rs — self-contained, stateless, and free to modify.