Component DropdownMenu

DropdownMenu

A menu widget built on top of Popover.

Use this for simple action menus (MenuItem + Separator).

When to use

• "More actions" menus (Open / Rename / Delete)
• Lightweight command/action lists

Not a good fit:

• Menus that need complex keyboard navigation/search (typically requires a stronger widget/ManagedView)
• Large option sets (use ComboBox)

API

• dropdown_menu(): constructor
• id(...) / key(...): stable identity
• label(...): trigger button label
• items([...]):
  • DropdownItem::Item(DropdownMenuItem)
  • DropdownItem::Separator
• DropdownMenuItem::new(id, label):
  • id: String: your domain/business id
  • label: SharedString
  • .disabled(true): disable the item
• on_select(|id, ev, window, cx| ...): fired when an item is clicked (menu closes first)

Interaction and behavior

• DropdownMenu maintains its own open/closed state.
• Clicking the trigger toggles it.
• Clicking outside closes it.
• Clicking a menu item closes first, then calls on_select.

Example

use gpui::ElementId;
use yororen_ui::component::{
    DropdownItem, DropdownMenuItem, dropdown_menu,
};

let view = dropdown_menu()
    .id(ElementId::from(("demo", "dropdown")))
    .label("Options")
    .items([
        DropdownItem::Item(DropdownMenuItem::new("open", "Open")),
        DropdownItem::Item(DropdownMenuItem::new("rename", "Rename")),
        DropdownItem::Separator,
        DropdownItem::Item(DropdownMenuItem::new("delete", "Delete").disabled(true)),
    ])
    .on_select(|id, _ev, _window, _cx| {
        // id: String
        // handle selection
    });

Example: Width and placement

use gpui::{ElementId, px};
use yororen_ui::component::{dropdown_menu, PopoverPlacement};

let view = dropdown_menu()
    .id(ElementId::from(("demo", "dropdown")))
    .width(px(260.))
    .placement(PopoverPlacement::BottomEnd);