Menu¶

Structure¶

Declaration¶

struct Menu<Label, Content> : View where Label : View, Content : View

Overview¶

A menu is created from a view builder of different views. Each acceptable view will be shown as a different row in the menu. The canonical view for using in a menu is Button, but these views also work: Menu, Text, Button, Link, Label, Divider, and Image.

There are 3 different initializers, one for each of the different label types:

The following example presents a menu of three buttons and a submenu, which contains two buttons of its own.

struct MenuView: View {
    var body: some View {
        Menu("Actions") {
            Button("Duplicate", action: { print("‼️") })
            Button("Delete…", action: { print("🗑") })
            Menu("Copy") {
                Button("Copy", action: { print("📑") })
                Button("Copy Formatted", action: { print("🔤") })
            }
        }
    }
}

A gif displaying a single button in the center of the screen that reads "Actions" which holds down to present a menu with three different options: Copy, Delete..., or Duplicate. If selected, the Copy button prompts the appearance of a submenu, which has the option to Copy or Copy Formatted.

You can create the menu's title with a LocalizedStringKey, as seen in the previous example, or with a ViewBuilder that creates multiple views, such as an image and a text view:

struct MenuView: View {
    var body: some View {
        Menu {
            Button("Open in Preview", action: { })
            Button("Save as PDF", action: { })
        } label: {
            Image(systemName: "doc")
            Text("PDF")
        }
    }
}

A gif displaying a single label in the center of the screen that reads "PDF" which holds down to reveal a menu with the options to Save as PDF or Open in Preview.

Styling Menus¶

Use the menuStyle(_:) modifier to change the style of all menus in a view. See the MenuStyle page for more on the types of styles available, as well as how to create your own style.

struct MenuView: View {
    var body: some View {
        Menu("Editing") {
            Button("Set In Point", action: { })
            Button("Set Out Point", action: { })
        }
        .menuStyle(DefaultMenuStyle())
    }
}

A gif displaying a single button in the center of the screen that reads "Editing" which holds down to reveal a menu with the options to Set Out Point or Set In Point. The menu uses the menuStyle view modifier to apply a default style.

Availability¶

iOS 14.0+

macOS 11.0+

Topics¶

Instance Property¶

body The content and behavior of the view.

Initializer¶

init(_:) Creates a menu based on a style configuration.

init(_:content:) Creates a menu with a localized string key label.

init(_:content:) Creates a menu with a string label.

init(content:label:) Creates a menu with a view label.

Type Alias¶

Body The type of view representing the body of this view.