Component Menu

Menu

A body-only shell that iterates MenuState.items (a Vec<DropdownItem>) and renders one row per item. Used inside Popover and DropdownMenu as the body content. Keyboard nav highlights the next / previous selectable item, wrapping at the ends and skipping separators.

The caller owns a Entity<MenuState>.

Import

use yororen_ui::headless::menu::{menu, MenuState};
use yororen_ui::headless::dropdown_menu::{DropdownItem, DropdownMenuItem};

Minimal example

use yororen_ui::headless::menu::{menu, MenuState};
use yororen_ui::headless::dropdown_menu::{DropdownItem, DropdownMenuItem};
use gpui::Entity;

let menu_state: Entity<MenuState> = cx.new(|cx| {
    let mut s = MenuState::new(cx);
    s.set_items(vec![
        DropdownItem::Item(DropdownMenuItem::new("profile", "Profile")),
        DropdownItem::Item(DropdownMenuItem::new("settings", "Settings")),
        DropdownItem::Separator,
        DropdownItem::Item(DropdownMenuItem::new("logout", "Log out")),
    ]);
    s.set_on_select({
        let entity = cx.entity();
        move |id: SharedString, _window, cx| {
            entity.update(cx, |s, _cx| s.menu_choice = id.to_string());
        }
    });
    s
});

menu("user-menu", menu_state).render(cx)

render(cx) returns a Stateful<Div> containing the full menu body. The caller typically appends no further children — the body is complete after render.

Props (state methods on &Entity<MenuState> via state.update(...) / state.read(...))

The headless menu(id, state) factory takes the id and the state entity. All runtime control flows through methods on the state. The methods shown below are the 6 most common; the full list is in the source.

Method	Purpose
new(app)	Mint a fresh state. Returns Entity<Self>.
set_items(items)	The Vec<DropdownItem> (built with DropdownMenuItem::new(id, label) or DropdownItem::Separator / DropdownItem::Group(...)).
set_on_select(f)	Fn(SharedString, &mut Window, &mut App) + 'static + Send + Sync. Fires when the user picks an item (click or Enter once highlighted).
select_highlighted(w, cx)	Fire on_select with whatever item is currently highlighted.
highlight_next() / highlight_prev()	Move the highlighted item; wraps at the ends and skips separators.

Notes

• Factory takes (id, state: Entity<MenuState>).
• .render(cx) is one-arg and returns Stateful<Div>. The renderer paints the full body (rows + separators + group headers); the caller does not need to append children.
• For a trigger + body pair, use DropdownMenu instead. Menu is the body-only shell meant to be embedded in a Popover or as the content of a DropdownMenu.
• The keyboard-nav algorithm is shared with Select, ComboBox, and Listbox via the ListNavigable trait (see headless/list_navigable.rs).

See also

DropdownMenu, Popover, Select, ComboBox, Listbox