Contextmenu

SwiftUI continues to surprise us with its elegant solutions to common UI patterns. One such gem is the ContextMenu—a powerful modifier that lets you attach contextual actions to any view. Think of it as the right-click menu for touch interfaces.

What is Contextmenu?

The Contextmenu in SwiftUI is a view modifier that allows you to present a context menu when the user performs a secondary click (right-click) on a view. This is particularly useful for providing additional options or actions related to the content the user is interacting with.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Long press me")
            .padding()
            .contextMenu {
                Button(action: {
                    print("Edit tapped")
                }) {
                    Label("Edit", systemImage: "pencil")
                }

                Button(action: {
                    print("Delete tapped")
                }) {
                    Label("Delete", systemImage: "trash")
                }
            }
    }
}

Use Cases

Context menus are useful in scenarios like:

• File management (rename, delete, duplicate)

• List items with secondary actions

• Image previews with quick edits

• Admin dashboards with hidden controls

They’re especially useful when you want to keep your UI clean but still offer power-user features.

Platform Behavior

ContextMenus behave differently depending on the platform:

On iOS, they feel like a native part of the system. On macOS, they integrate seamlessly with right-click behavior. Just be mindful of platform limitations.

Customizing the Experience

Conditionally show menu items:

.contextMenu {
    Button("Share", action: {
        print("Share tapped")
    }) {
        Label("Share", systemImage: "square.and.arrow.up")
    }
    if isAdmin {
        Button("Ban User", action: {
            print("Ban User tapped")
        }) {
            Label("Ban User", systemImage: "person.crop.square")
        }
    }
    Button("Report", action: {
        print("Report tapped")
    }) {
        Label("Report", systemImage: "exclamationmark.bubble")
    }
}

This keeps your menus dynamic and relevant.

Best Practices

• Keep context menus short and focused.

• Use system icons for familiarity.

• Avoid placing critical actions (like "Delete") without confirmation.

• Test on all platforms.

Conclusion

SwiftUI’s ContextMenu is a subtle but powerful tool. It helps you declutter your UI while still offering rich interactions. Whether you're building a productivity app or a social platform, context menus can elevate your user experience.

Want to see more SwiftUI tricks? Check out my post on Popovers in SwiftUI for another clean way to present options without navigating away.

Read more

• Building Editable Lists in SwiftUI • 6 minutes reading time.
• Easy Publishers • 2 minutes reading time.
• iCloud Drive Tips & Tricks • 8 minutes reading time.

Share