SwiftUI Menu — How to use Menus in SwiftUI

SwiftUI Menu is a powerful and versatile control that lets you organize and present multiple actions in a space-efficient and user-friendly way. Mastering SwiftUI Menu is essential to create seamless and intuitive user experiences.

In this comprehensive guide, we'll cover everything you need to know about using Menu in SwiftUI, including:

How to create basic and advanced menus.
Leveraging primary actions and nested menus.
Adding sections for better organization.
Styling and customizing menus.
Advanced dismissal behaviors and accessibility features.

A SwiftUI Menu is a control that displays a list of actions or options in a popup. It can handle:

Basic Actions like simple buttons.
Advanced Features such as nested menus, sections, and dynamic behaviors.
Accessibility with support for dynamic labels and subtitles.

Why Use Menus?

Space Efficiency: Reduce screen clutter by grouping multiple actions in a compact interface.
User Experience: Provide an organized structure for actions.
Flexibility: Easily adapt menus for different use cases, including sorting, navigation, and settings.

Let's start with the basics by creating a simple SwiftUI Menu with two actions:

// SwiftUI Menu Tutorial by AppMakers.Dev

import SwiftUI

struct BasicMenuView: View {
    var body: some View {
        Menu("Menu Options") {
            Button("Say Hello", action: sayHello)
            Button("Show Alert", action: showAlert)
        }
        .padding()
    }

    func sayHello() {
        print("Hello, World!")
    }

    func showAlert() {
        print("Alert triggered!")
    }
}

// SwiftUI Menu Tutorial by AppMakers.Dev

import SwiftUI

struct BasicMenuView: View {
    var body: some View {
        Menu("Menu Options") {
            Button("Say Hello", action: sayHello)
            Button("Show Alert", action: showAlert)
        }
        .padding()
    }

    func sayHello() {
        print("Hello, World!")
    }

    func showAlert() {
        print("Alert triggered!")
    }
}

Key Features:

Trigger Label: "Menu Options" acts as the menu's trigger.
Menu Actions: Use Button to define each action.
Dynamic Behavior: Customize actions to fit your app's needs.

Nested Menus in SwiftUI

Nested menus let you organize related actions hierarchically. Here's how to create a menu with submenus:

// SwiftUI Menu Tutorial by AppMakers.Dev

import SwiftUI

struct NestedMenuView: View {
    var body: some View {
        Menu("Actions") {
            Button("Duplicate", action: duplicate)
            Button("Rename", action: rename)
            Menu("More Options") {
                Button("Advanced 1", action: advancedOne)
                Button("Advanced 2", action: advancedTwo)
            }
        }
    }

    func duplicate() { print("Duplicate action executed") }
    func rename() { print("Rename action executed") }
    func advancedOne() { print("Advanced option 1 executed") }
    func advancedTwo() { print("Advanced option 2 executed") }
}

// SwiftUI Menu Tutorial by AppMakers.Dev

import SwiftUI

struct NestedMenuView: View {
    var body: some View {
        Menu("Actions") {
            Button("Duplicate", action: duplicate)
            Button("Rename", action: rename)
            Menu("More Options") {
                Button("Advanced 1", action: advancedOne)
                Button("Advanced 2", action: advancedTwo)
            }
        }
    }

    func duplicate() { print("Duplicate action executed") }
    func rename() { print("Rename action executed") }
    func advancedOne() { print("Advanced option 1 executed") }
    func advancedTwo() { print("Advanced option 2 executed") }
}

Why Nested Menus?

Better Organization: Ideal for grouping complex actions.
Scalability: Add more levels as your app grows.

Sections allow you to group related actions within a menu, making them more organized and easier to navigate. Here is how you can create SwiftUI Menu with Sections.

// SwiftUI Menu Tutorial by AppMakers.Dev

struct MenuWithSectionsView: View {

    var body: some View {
        VStack {
            // Menu with sections
            Menu {

                Section("Section 1 Title") {
                    Button {
                        print("Up")
                    } label: {
                        Label("Up", systemImage: "arrow.up")
                    }

                    Button {
                      print("Down")
                    } label: {
                        Label("Down", systemImage: "arrow.down")
                    }
                }

                Section("Section 2 Title") {
                    Button {
                        print("Open settings")
                    } label: {
                        Label("Settings", systemImage: "gearshape")
                    }
                }
            } label: {
                Image(systemName: "line.3.horizontal")
                    .font(.title2)
                    .foregroundColor(.primary)
            }

            Spacer()
        }
        .padding()
    }

}

// SwiftUI Menu Tutorial by AppMakers.Dev

struct MenuWithSectionsView: View {

    var body: some View {
        VStack {
            // Menu with sections
            Menu {

                Section("Section 1 Title") {
                    Button {
                        print("Up")
                    } label: {
                        Label("Up", systemImage: "arrow.up")
                    }

                    Button {
                      print("Down")
                    } label: {
                        Label("Down", systemImage: "arrow.down")
                    }
                }

                Section("Section 2 Title") {
                    Button {
                        print("Open settings")
                    } label: {
                        Label("Settings", systemImage: "gearshape")
                    }
                }
            } label: {
                Image(systemName: "line.3.horizontal")
                    .font(.title2)
                    .foregroundColor(.primary)
            }

            Spacer()
        }
        .padding()
    }

}

Key Features:

Section Titles: Clearly labeled groups for better usability.
Dynamic Labels: Labels update based on state variables.
Animations: Smooth transitions when toggling options.

How to use Primary Actions in SwiftUI Menus

Primary actions let you assign a default action to a menu, triggered by a simple tap. Secondary actions appear on a long press.

// SwiftUI Menu Tutorial by AppMakers.Dev

struct PrimaryActionMenuView: View {
    var body: some View {

        Menu("Menu Options (Try Tap & Long Press)") {
            Button("Say Hello", action: optionOne)
            Button("Show Alert", action: optionTwo)
        } primaryAction: {
            performPrimaryAction()
        }
        .padding()

    }

    func optionOne() { print("Option 1 executed") }
    func optionTwo() { print("Option 2 executed") }
    func performPrimaryAction() { print("Primary action executed") }
}

// SwiftUI Menu Tutorial by AppMakers.Dev

struct PrimaryActionMenuView: View {
    var body: some View {

        Menu("Menu Options (Try Tap & Long Press)") {
            Button("Say Hello", action: optionOne)
            Button("Show Alert", action: optionTwo)
        } primaryAction: {
            performPrimaryAction()
        }
        .padding()

    }

    func optionOne() { print("Option 1 executed") }
    func optionTwo() { print("Option 2 executed") }
    func performPrimaryAction() { print("Primary action executed") }
}

Add subtitles to menu items for better accessibility:

// SwiftUI Menu Tutorial by AppMakers.Dev

struct AccessibleMenuView: View {
    var body: some View {
        Menu {
            Button(action: shareDocument) {
                Text("Share")
                Text("Send this document to others")
            }
            Button(action: saveToCloud) {
                Text("Save to Cloud")
                Text("Backup your document to iCloud")
            }
        } label: {
            Label("File Options", systemImage: "doc.text")
        }
    }

    func shareDocument() { print("Document shared") }
    func saveToCloud() { print("Document saved to cloud") }
}

// SwiftUI Menu Tutorial by AppMakers.Dev

struct AccessibleMenuView: View {
    var body: some View {
        Menu {
            Button(action: shareDocument) {
                Text("Share")
                Text("Send this document to others")
            }
            Button(action: saveToCloud) {
                Text("Save to Cloud")
                Text("Backup your document to iCloud")
            }
        } label: {
            Label("File Options", systemImage: "doc.text")
        }
    }

    func shareDocument() { print("Document shared") }
    func saveToCloud() { print("Document saved to cloud") }
}

Control how menus behave after an action using .menuActionDismissBehavior.

// SwiftUI Menu Tutorial by AppMakers.Dev

struct CustomMenuDismissBehaviorView: View {
    var body: some View {
        Menu("Custom Menu") {
            Button("Action 1", action: actionOne)
            Button("Action 2", action: actionTwo)
        }
        .menuActionDismissBehavior(.disabled)
    }

    func actionOne() { print("Quick Action 1 executed") }
    func actionTwo() { print("Quick Action 2 executed") }
}

// SwiftUI Menu Tutorial by AppMakers.Dev

struct CustomMenuDismissBehaviorView: View {
    var body: some View {
        Menu("Custom Menu") {
            Button("Action 1", action: actionOne)
            Button("Action 2", action: actionTwo)
        }
        .menuActionDismissBehavior(.disabled)
    }

    func actionOne() { print("Quick Action 1 executed") }
    func actionTwo() { print("Quick Action 2 executed") }
}

SwiftUI Menu — How to use Menus in SwiftUI

Contents

What is a SwiftUI Menu?

Why Use Menus?

How to create Basic SwiftUI Menu

Key Features:

Nested Menus in SwiftUI

Why Nested Menus?

SwiftUI Menu with Sections

Key Features:

How to use Primary Actions in SwiftUI Menus

SwiftUI Menu with Subtitles

Advanced Customization: Menu Dismissal Behavior

You Might Be Interested In:

Thanks for Reading