Menu

Vizia menus are built from three views:

• MenuBar for top-level horizontal menu groups.
• Submenu for nested menu popups.
• MenuButton for actionable leaf items.

When To Use It

Use menu views for command-heavy desktop interfaces where users expect grouped actions (for example File/Edit/View) and nested command hierarchies.

Constructing Menus

Top-level menubar with a submenu and menu buttons:

MenuBar::new(cx, |cx| {
	Submenu::new(
		cx,
		|cx| Label::new(cx, "File"),
		|cx| {
			MenuButton::new(
				cx,
				|cx| cx.emit(AppEvent::NewProject),
				|cx| Label::new(cx, "New"),
			);

			MenuButton::new(
				cx,
				|cx| cx.emit(AppEvent::OpenProject),
				|cx| Label::new(cx, "Open"),
			);
		},
	);
});

Nested submenu:

Submenu::new(
	cx,
	|cx| Label::new(cx, "Export"),
	|cx| {
		MenuButton::new(
			cx,
			|cx| cx.emit(AppEvent::ExportPng),
			|cx| Label::new(cx, "PNG"),
		);
	},
);

API Notes

• MenuBar::new(cx, content) manages top-level open/close behavior.
• Submenu::new(cx, content, menu) renders a pressable row and popup content.
• MenuButton::new(cx, action, content) triggers action and closes open menus.
• Menu open state is coordinated with MenuEvent::{Open, Close, CloseAll, ToggleOpen}.

Components and Styling

Accessibility

• MenuButton uses role MenuItem and is keyboard navigable.
• Keep menu labels concise and ensure command text is descriptive.
• Close menus after command activation for predictable focus behavior.

Keyboard Interaction

When a menu popup is open:

When focus is on a submenu trigger row: