DEV Community

Cover image for Context Menus in iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on

Context Menus in iOS 18 - #30DaysOfSwift

Day 14: Enhancing Interactions with Context ⚙️

Welcome back to the #30DaysOfSwift series!

Today, let's look at Context Menus. A powerful way to offer additional actions when users long-press or right-click on UI elements.

Image description

By integrating context menus into your SwiftUI app, you can create a smooth, intuitive experience for users when interacting with different elements.

What are Context Menus?

  • Context Menus provide additional actions that a user can perform on an element.
  • They are revealed via a long press or right-click, making it easy for users to access additional options without cluttering the UI.

Code Example: Context Menus in Action

struct ContextMenuExample: View {
    @State private var favorite: Bool = false

    var body: some View {
        VStack {
            HStack {
                Text("Long-press me!")
                    .font(.title2)
                    .padding()
                Spacer()
                if favorite {
                    Image(systemName: "heart.fill")
                        .foregroundColor(.red) // Customization: Heart icon if marked as favorite
                }
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color.blue.opacity(0.2)) // Custom background color
            .cornerRadius(10) // Rounded corners for aesthetic touch
            .contextMenu { // Adding the context menu
                Button(action: {
                    favorite.toggle()
                }) {
                    Label("Favorite", systemImage: favorite ? "heart.fill" : "heart")
                }

                Button(action: {
                    print("Shared!")
                }) {
                    Label("Share", systemImage: "square.and.arrow.up")
                }

                Button(action: {
                    print("Deleted!")
                }) {
                    Label("Delete", systemImage: "trash")
                        .foregroundColor(.red) // Custom color for danger actions
                }
            }
        }
        .padding()
    }
}
Enter fullscreen mode Exit fullscreen mode

Now it's your turn! Try adding context menus to elements in your app to make your interactions more intuitive and user-friendly!

The full series is available on my profile and the components can also be found at shipios.app/components.

Happy Coding! 🎨

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up