Elements
MenuItem
A clickable menu item element for use within ContextMenu. Accepts child elements (like Label and Image) and automatically closes the parent menu when clicked.
Constructor
// Text only
new MenuItem(new Label("Edit")).OnClick(_ => Edit());
// With icon
new MenuItem(new Image { image = editIcon }, new Label("Edit")).OnClick(_ => Edit());Examples
Basic Menu Item
Simple text menu items with click handlers:
new ContextMenu(
new MenuItem(new Label("Cut")).OnClick(_ => Cut()),
new MenuItem(new Label("Copy")).OnClick(_ => Copy()),
new MenuItem(new Label("Paste")).OnClick(_ => Paste())
);Menu Items with Icons
Add icons to menu items for better visual recognition:
new ContextMenu(
new MenuItem(new Image { image = cutIcon }, new Label("Cut")).OnClick(_ => Cut()),
new MenuItem(new Image { image = copyIcon }, new Label("Copy")).OnClick(_ => Copy()),
new MenuItem(new Image { image = pasteIcon }, new Label("Paste")).OnClick(_ => Paste())
);Disabled Menu Items
Disable menu items based on application state:
var IsLocked = new ReactiveProperty<bool>(false);
new ContextMenu(
new MenuItem(new Label("Cut")).OnClick(_ => Cut())
.Disabled(!hasSelection),
new MenuItem(new Label("Copy")).OnClick(_ => Copy())
.Disabled(!hasSelection),
new MenuItem(new Label("Paste")).OnClick(_ => Paste())
.Disabled(!hasClipboardContent)
);
// Or with reactive binding
new MenuItem(new Label("Delete")).OnClick(_ => Delete())
.BindDisabled(IsLocked);Properties
| Prop | Type | Default |
|---|---|---|
children? | IElement[] | [] |
disabled? | bool | false |
visible? | bool | true |
name? | string | "" |
Methods
| Prop | Type | Default |
|---|---|---|
OnClick? | (EventCallback<ClickEvent>) => MenuItem | - |
SetChildren? | (params IElement[]) => MenuItem | - |
BindChildren? | <TChild>(Observable<TChild[]>, Func<TChild, IElement>) => MenuItem | - |
Disabled? | (bool = true) => MenuItem | - |
GetDisabled? | () => bool | - |
BindDisabled? | (Observable<bool>) => MenuItem | - |
Visible? | (bool) => MenuItem | - |
GetVisible? | () => bool | - |
BindVisible? | (Observable<bool>) => MenuItem | - |
ClassName? | (string, bool = true) => MenuItem | - |
BindClassName? | (string, Observable<bool>) => MenuItem | - |
Behavior
- Auto-close: When a MenuItem is clicked, it automatically closes its parent ContextMenu
- Disabled state: Disabled menu items do not trigger click handlers and show reduced opacity
- Children as content: Icons, labels, and other elements are passed as children, following the same pattern as Button
CSS Classes
.elements-menu-item- The menu item container.elements-menu-item:hover- Hover state styling.elements-menu-item.unity-disabled- Disabled state styling
MenuItem extends Button which extends Group which extends BaseElement.