MenuButton

MenuButton is the turnkey "button plus flyout menu" widget.

Use it when the user presses a button to reveal a short list of actions. The widget renders the trigger button and, when is_open is true, registers a flyout portal that contains a Menu.

Example

use fission::prelude::*;

let widget: Widget = MenuButton {
id: WidgetId::explicit("message_actions"),
label: "Actions".into(),
is_open: view.state().actions_open,
on_toggle: Some(toggle_actions_menu_action),
items: vec![
    MenuItem {
        label: "Archive".into(),
        icon: None,
        on_select: Some(archive_action),
    },
    MenuItem {
        label: "Delete".into(),
        icon: None,
        on_select: Some(delete_action),
    },
],
}
.into();

The usual reducer flow is simple: on_toggle flips is_open, and each menu item's action performs the choice and closes the menu by updating state.

Field table

Field	Type	Meaning	Notes / default behavior
id	WidgetId	Stable identity for the trigger and portal anchor.	Required.
label	String	Visible text on the trigger button.	Required.
items	Vec<MenuItem>	Menu entries to show when open.	Required.
is_open	bool	Whether the flyout menu is currently visible.	Controlled by app state.
on_toggle	Option<ActionEnvelope>	Action dispatched when the trigger is pressed.	Defaults to None. Usually toggles is_open.

Portal and action behavior

MenuButton does not hide itself after selection unless your reducers say so. That is an intentional part of Fission's explicit state model. The widget describes the menu. Your state decides whether the menu remains open.

The checked-in implementation also uses an internal Menu width of 200.0 and max height of 300.0. If you need different popup sizing, compose Menu and your own portal or popover directly.

Specific advice

Use MenuButton for action menus, not for choosing one persistent value from a form. For persistent value selection, Select usually gives clearer product semantics.

Production checklist

For MenuButton, review the fields that change behavior before treating the widget as finished: id, label, items, is_open, on_toggle. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

Bind on_toggle to explicit reducer actions and test that the reducer handles unavailable, duplicate, or invalid input safely.

•

When child widgets are generated from data, give reordered or filtered rows an explicit WidgetId so retained local state and scroll behavior do not drift between items.

•

Set id only when identity must be stable across filtering, reordering, diagnostics, or tests; otherwise let Fission derive identity from structure.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same MenuButton setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Menu, MenuItem, Select, and Button.