Skip to main content
Menu(props: { label: Component }, children: Component[]): Component;

​
Parameters

​
props
{ label: Component }
Configuration object containing the menu label.
​
children
Component[]
An array of menu items, including buttons, dividers, and submenus.

​
Support

​
Usage

​
Simple menu with actions

Menu({ label: Text("Options") }, [
    Button("Edit", () => {
        editItem();
    }),
    Button("Delete", () => {
        deleteItem();
    })
])

Menu({
    label: HStack([
        Image({ systemName: "ellipsis" }),
        Text("More")
    ])
}, [
    Button("Share", () => {
        shareContent();
    }),
    Button("Copy Link", () => {
        copyLink();
    }),
    Divider(),
    Button("Report", () => {
        reportContent();
    })
])

​
Context menu with sections

Menu({ label: Text("File") }, [
    Button("New", () => {
        createNewFile();
    }),
    Button("Open", () => {
        openFile();
    }),
    Divider(),
    Button("Save", () => {
        saveFile();
    }),
    Button("Save As...", () => {
        saveAsFile();
    }),
    Divider(),
    Button("Print", () => {
        printFile();
    })
])

Menu({ label: Text("Actions") }, [
    Button("Edit", () => {
        editPost();
    }),
    Button("Share", () => {
        sharePost();
    }),
    Divider(),
    Button("Delete", () => {
        deletePost();
    })
])

Menu({ label: Text("Format") }, [
    Button("Bold", () => {
        toggleBold();
    }),
    Button("Italic", () => {
        toggleItalic();
    }),
    Divider(),
    Menu({ label: Text("Text Size") }, [
        Button("Small", () => {
            setTextSize("small");
        }),
        Button("Medium", () => {
            setTextSize("medium");
        }),
        Button("Large", () => {
            setTextSize("large");
        })
    ])
])

VStack([
    Text("Document content")
]).toolbar(
    ToolbarItem({ placement: "navigationBarTrailing" }, [
        Menu({ label: Text("More") }, [
            Button("Export", () => {
                exportDocument();
            }),
            Button("Print", () => {
                printDocument();
            }),
            Divider(),
            Button("Settings", () => {
                showSettings();
            })
        ])
    ])
)

Menu({
    label: Image({ systemName: "gear" })
}, [
    Button({
        label: HStack([
            Image({ systemName: "person" }),
            Text("Profile")
        ]),
        action: () => {
            showProfile();
        }
    }),
    Button({
        label: HStack([
            Image({ systemName: "bell" }),
            Text("Notifications")
        ]),
        action: () => {
            showNotifications();
        }
    }),
    Divider(),
    Button({
        label: HStack([
            Image({ systemName: "arrow.right.square" }),
            Text("Sign Out")
        ]),
        action: () => {
            signOut();
        }
    })
])

​
Dynamic menu based on state

Menu({ label: Text("Status") }, [
    isOnline
        ? Button("Go Offline", () => {
            goOffline();
        })
        : Button("Go Online", () => {
            goOnline();
        }),
    Divider(),
    Button("Refresh", () => {
        refresh();
    })
])

​
Selection menu

Menu({ label: Text("Sort By") }, [
    Button("Name", () => {
        sortBy("name");
    })
    .foregroundStyle(currentSort === "name" ? Color("blue") : Color("primary")),
    Button("Date", () => {
        sortBy("date");
    })
    .foregroundStyle(currentSort === "date" ? Color("blue") : Color("primary")),
    Button("Size", () => {
        sortBy("size");
    })
    .foregroundStyle(currentSort === "size" ? Color("blue") : Color("primary"))
])

List([
    ForEach(items, (item) =>
        HStack([
            Text(item.title),
            Spacer(),
            Menu({ label: Text("⋯") }, [
                Button("Edit", () => {
                    editItem(item);
                }),
                Button("Duplicate", () => {
                    duplicateItem(item);
                }),
                Divider(),
                Button("Delete", () => {
                    deleteItem(item);
                })
            ])
        ])
    )
])