Menu in SwiftUI

Menu is a view that creates a context menu or drop-down list with various options, allowing users to choose from a set of actions. It’s ideal for creating compact and interactive action lists, especially when space is limited or when displaying multiple choices.

Basic Structure

A Menu is defined by a label (or button) and an array of menu items that appear when the label is tapped.

Menu("Options") {
    // Menu items go here
}

Simple Example

Here’s a basic example of a Menu with multiple Button actions as menu items:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Menu("Options") {
            Button("Action 1") {
                // Action 1 code
            }
            Button("Action 2") {
                // Action 2 code
            }
            Button("Action 3") {
                // Action 3 code
            }
        }
        .padding()
    }
}

In this example:

• The menu title is “Options”.
• When tapped, the menu displays three actions (buttons) for selection.

Customizing the Menu Label

The label for the menu can be customized with any view, such as a combination of text and icon, or a custom layout.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Menu {
            Button("Action 1", action: {})
            Button("Action 2", action: {})
            Button("Action 3", action: {})
        } label: {
            Label("Options", systemImage: "ellipsis.circle")
        }
        .padding()
    }
}

Here, the Label is used as the menu button, combining an icon (ellipsis.circle) and the text “Options”.

Adding Nested Menus

You can create nested menus by placing a Menu inside another Menu, which is useful for creating hierarchical structures.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Menu("Settings") {
            Button("Profile", action: {})
            Menu("Preferences") {
                Button("Notifications", action: {})
                Button("Privacy", action: {})
            }
            Button("Sign Out", action: {})
        }
        .padding()
    }
}

In this example:

• The main menu titled “Settings” includes a nested “Preferences” menu, which contains additional options.

Menu with Divider

To separate menu items visually, you can add Divider() between them, providing a clear distinction between grouped actions.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Menu("Actions") {
            Button("Edit", action: {})
            Button("Delete", action: {})
            
            Divider()
            
            Button("Settings", action: {})
            Button("Help", action: {})
        }
        .padding()
    }
}

In this example:

• The Divider() separates the “Edit” and “Delete” actions from “Settings” and “Help,” making it clear they belong to different groups.

Menu with Images and Icons

You can add icons to the menu items for visual appeal and improved clarity, using Label or Image.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Menu("Options") {
            Button(action: {}) {
                Label("Edit", systemImage: "pencil")
            }
            Button(action: {}) {
                Label("Delete", systemImage: "trash")
            }
            Button(action: {}) {
                Label("Share", systemImage: "square.and.arrow.up")
            }
        }
        .padding()
    }
}

Here:

• Each Button in the menu includes a Label with both text and a systemImage icon, giving each action a unique icon.

Menu with Conditional Options

You can control which menu items are shown based on conditions, such as user state or other logic.

In this example:

• The Admin Settings option only appears if the isAdmin condition is true.

Menu Example in a Toolbar (iOS 15+)

Starting with iOS 15, Menu can be used in a toolbar, making it suitable for adding expandable action lists in navigation views.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Content here")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Menu {
                            Button("Settings", action: {})
                            Button("Profile", action: {})
                        } label: {
                            Image(systemName: "gearshape")
                        }
                    }
                }
        }
    }
}

This example:

• Adds a Menu to the navigation bar as a toolbar item, with the gearshape icon as its label.

Menu is a versatile and compact way to display action lists, with options for customization and nesting:

• Flexible Layout: Customize the menu label with text, icons, or other views.
• Hierarchical Menus: Create nested menus for organized, expandable actions.
• Conditional Items: Show or hide options based on conditions or user states.
• Toolbar Integration: Use Menu in toolbars for quick access to actions in navigation views.