.contextMenu(content: Component | Component[]): Component;
content
Component | Component[]
required
The menu items to display. Can be a single component or an array of components, typically Button items with optional Divider separators.
Support
Usage
Text("Long press me")
.contextMenu([
Button("Copy", () => handleCopy()),
Button("Paste", () => handlePaste()),
Button("Delete", () => handleDelete())
])
Image({ url: "https://example.com/photo.jpg" })
.resizable()
.frame({ width: 200, height: 200 })
.contextMenu([
Button("Save to Photos", () => {}),
Button("Copy Image", () => {}),
Divider(),
Button("Delete", () => {})
])
On a list row
List([
ForEach(items, (item) =>
Text(item.title)
.contextMenu([
Button("Edit", () => editItem(item)),
Button("Duplicate", () => duplicateItem(item)),
Divider(),
Button("Delete", () => deleteItem(item))
])
)
])
Text("Content")
.contextMenu([
Button("Edit", () => {}),
Menu({ label: Text("Share") }, [
Button("Copy Link", () => {}),
Button("Email", () => {}),
Button("Messages", () => {})
]),
Divider(),
Button("Delete", () => {})
])
Notes
- On iOS, the context menu appears on long press. On macOS, it appears on right-click.
- The view is displayed with a highlight and the menu appears as a popup alongside a preview of the view.
See Also
- Menu — dropdown menu triggered by tap
- Button — tappable action used as menu items
