November 19, 2024
SwiftUI Menu — How to use Menus in SwiftUI
Using SwiftUI Menu Tutorial
Alexander Adelmaer
3 min read
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.
What is a SwiftUI Menu?
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.
How to create Basic SwiftUI Menu
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
Buttonto 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.
SwiftUI Menu with Sections
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") }
}SwiftUI Menu with Subtitles
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") }
}Advanced Customization: Menu Dismissal Behavior
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") }
}You Might Be Interested In:
- SwiftUI Button — The Ultimate Guide for iOS Developers
- SwiftUI Grid: Better Layouts with Dynamic Grids
- SwiftUI Navigation Stack
Thanks for Reading
👏👏 If you enjoyed and found this post useful, please clap and share it.
👉 Join AppMakers on Medium for SwiftUI, Swift & iOS App Development
📩 Subscribe to our Mailing List for Updates about new articles
LEARN iOS Development 🏷 Latest SwiftUI Tutorials 📙 SwiftUI Handbook
👉 Follow the Editor for More Updates and Useful Articles
Happy Coding to You 🧑🏽💻👩🏻💻