Skip to main content

Menu

Menu is the popup action list used by higher-level controls such as MenuButton and Select.

It takes a list of MenuItem values and renders them as vertically stacked ghost buttons inside a bordered, elevated surface. When the content grows tall enough, the menu becomes scrollable.

Example​

use fission::prelude::*;

let node = Menu {
items: vec![
    MenuItem {
        label: "Archive".into(),
        icon: None,
        on_select: Some(archive_action),
    },
    MenuItem {
        label: "Mark unread".into(),
        icon: None,
        on_select: Some(mark_unread_action),
    },
],
width: Some(220.0),
max_height: Some(280.0),
}
.build(ctx, view);

Menu itself only renders the list. Some surrounding widget still has to decide when and where to show it.

Field table​

FieldTypeMeaningNotes / default behavior
itemsVec<MenuItem>Entries to render from top to bottom.Required.
widthOption<f32>Target menu width.If None, item rows default to 200.0 wide.
max_heightOption<f32>Maximum height before the menu scrolls.Defaults to 300.0.

Layout and interaction behavior​

Each item row is rendered as a ghost button aligned to the start, with dividers between rows. The menu surface itself is wrapped in a Scroll when the estimated content height exceeds the configured maximum. This is why Menu is a good building block for compact action lists but not for enormous data sets.

Menu also does not own open state. Whether it appears, disappears, or repositions belongs to the parent widget or portal.

Specific advice​

Use Menu for short action lists. If the content is actually a form field choice, Select often gives better product-level meaning. If the content is long, searchable, or remote-backed, a Combobox or a dedicated screen is usually easier to use.

MenuButton, MenuItem, Select, and Scroll.