Skip to content

Component DropdownMenu

MeowLynxSea edited this page Jun 18, 2026 · 7 revisions

DropdownMenu

A button trigger that opens a list of selectable items below it. The trigger stays visible; the menu is hidden until the state is open.

use yororen_ui::headless::button::button;
use yororen_ui::headless::dropdown_menu::{dropdown_menu, DropdownMenuItem, DropdownMenuState};

let menu_state = DropdownMenuState::new(&mut **cx);
menu_state.update(cx, |s, _| {
    s.set_items(vec![
        DropdownMenuItem::new("cut",   "Cut"),
        DropdownMenuItem::new("copy",  "Copy"),
        DropdownMenuItem::new("paste", "Paste"),
    ]);
    s.set_dismiss_on_outside_click(true);
    s.set_on_select({
        let entity = cx.entity();
        move |id, _, cx| entity.update(cx, |s, _| s.last_action = id.to_string());
    });
});

dropdown_menu("edit-menu", menu_state)
    .trigger(button("edit-btn", cx)
        .caption("Edit")
        .on_click({
            let state = menu_state.clone();
            move |_, _, cx| state.update(cx, |s, _| s.toggle());
        })
        .render(cx))
    .content(/* AnyElement — usually a vbox of list_item(...) rows */)
    .render(cx)

State methods

Method Purpose
open() / close() / toggle() Show or hide.
is_open() / is_visible() Current state.
set_items(items) Vec<DropdownMenuItem> (built with DropdownMenuItem::new(id, label)).
set_dismiss_on_outside_click(v) Default true.
highlight_next() / highlight_prev() Move the highlighted item.
set_on_select(f) Fn(SharedString, &mut Window, &mut App) + 'static + Send + Sync.
select_highlighted(w, cx) Fire on_select for the highlighted item.

DropdownMenuItem builders: new(id, label), .icon(s), .disabled(v), .shortcut(keys).

.render(cx) returns Stateful<Div>. The trigger's click wiring is the caller's — wire it to state.toggle().

See also: Popover, SplitButton, Select.

Clone this wiki locally