Menu(props: { label: Component }, children: Component[]): Component;
The component displayed as the menu trigger. Typically a Button, Text, or Label.
An array of menu items. Typically Button components, with optional Divider separators and nested Menu components for submenus.
Support
Usage
Menu({ label: Text("Options") }, [
Button("Edit", () => handleEdit()),
Button("Delete", () => handleDelete())
])
Menu({ label: Image({ systemName: "ellipsis.circle" }) }, [
Button("Share", () => {}),
Button("Copy Link", () => {}),
Divider(),
Button("Report", () => {})
])
Menu({ label: Text("Format") }, [
Button("Bold", () => toggleBold()),
Button("Italic", () => toggleItalic()),
Divider(),
Menu({ label: Text("Text Size") }, [
Button("Small", () => setSize("small")),
Button("Medium", () => setSize("medium")),
Button("Large", () => setSize("large"))
])
])
Menu({ label: Image({ systemName: "gear" }) }, [
Button({
label: Label({ title: "Profile", systemImage: "person" }),
action: () => showProfile()
}),
Button({
label: Label({ title: "Notifications", systemImage: "bell" }),
action: () => showNotifications()
}),
Divider(),
Button({
label: Label({ title: "Sign Out", systemImage: "arrow.right.square" }),
action: () => signOut()
})
])
See Also
- Button — tappable action used as menu items
- ContextMenu — menu triggered by long press
- Label — title + icon combination for menu items
