SwiftUI menu provide a seamless and organized way to present actions and options to users and allowing developers to create powerful and interactive interfaces.
In this post, we will explore various aspects of SwiftUI Menu. We will cover a basic example, add a image to the menu, add a checkmark and more.
Table of Contents
Basic Example of SwiftUI Menu
How do i add a menu in SwiftUI? That is properly the question you are asking — so let’s kick things off with a basic example of how to create a menu using SwiftUI.
We will create a simple menu containing four buttons witch will do a simple print to the console.
struct MenuExampleView: View {
var body: some View {
Menu {
Button(action: { print("Menu button 1")
}) {
Text("Menu button 1")
}
Button(action: { print("Menu button 2")
}) {
Text("Menu button 2")
}
Button(action: { print("Menu button 3")
}) {
Text("Menu button 3")
}
Button(action: { print("Menu button 4")
}) {
Text("Menu button 4")
}
} label: {
Text("Menu")
}
}
}The result:
SwiftUI menu color
You can’t really change the color of a menu item using the standard foregroundColor or backgroundColor modifiers. But if you want your button to be red then you can use the button role parameter and set it to .destructive.
If you want to customize your menu with even more colors, you need to create a custom menu.
struct MenuExampleView: View {
var body: some View {
Menu {
Button(role: .destructive, action: { print("Menu button 1")
}) {
Text("Menu button 1")
}
} label: {
Text("Menu")
}
}
}The result:
SwiftUI menu with icons
Integrating icons into your menus enhances the visual aspect of your menu but it also helps the user pick the right menu item — icons is just easier to quickly recognize, so the app becomes more intuitive.
In the following example we will create three buttons with different icons. We will be using sf symboles inside a Label:
struct MenuExampleView: View {
var body: some View {
Menu {
Button(role: .destructive ,action: {
print("Menu button 1")
}) {
Label("Delete", systemImage: "minus.circle")
}
Button(action: {
print("Menu button 2")
}) {
Label("Phonebook", systemImage: "book")
}
Button(action: { print("Menu button 3")
}) {
Label("Send", systemImage: "envelope")
}
} label: {
Text("Menu")
}
}
}The result:
SwiftUI menu titles
If you want to build a larger menu it’s great to have some titles inside your menu. A well-crafted menu title helps users make informed decisions and makes it easy to choose the right menu item from a large list.
You can achieve this by using sections inside your menu. In the following example we will create a menu with two sections and therefore get two titles:
struct MenuExampleView: View {
var body: some View {
Menu {
Section("Header one"){
Button(role: .destructive ,action: {
print("Menu button 1")
}) {
Label("Delete", systemImage: "minus.circle")
}
}
Section("Header two") {
Button(action: {
print("Menu button 2")
}) {
Label("Phonebook", systemImage: "book")
}
Button(action: { print("Menu button 3")
}) {
Label("Send", systemImage: "envelope")
}
}
} label: {
Text("Menu")
}
}
}The result:
SwiftUI menu submenu
Creating submenus are an effective way to organize related actions and options within a menu. They provide a clear and organized approach to presenting a large number of choices without overwhelming users. Submenus are a fantastic tool when you need to group actions under a common category, making it easier for users to locate and select their desired option.
In the following example we will create a menu with a submenu — inside the submenu we will create one button:
struct MenuExampleView: View {
var body: some View {
Menu {
Button(role: .destructive ,action: {
print("Menu button 1")
}) {
Label("Delete", systemImage: "minus.circle")
}
Menu {
Button(action: {
print("Submenu button")
}, label: {
Label("Submenu button", systemImage: "figure.wave")
})
}label: {
Label("Submen", systemImage: "folder")
}
Button(action: {
print("Menu button 2")
}) {
Label("Phonebook", systemImage: "book")
}
Button(action: { print("Menu button 3")
}) {
Label("Send", systemImage: "envelope")
}
} label: {
Text("Menu")
}
}
}The result:
Menu with checkmark in SwiftUI
Menus can also display checkmarks to indicate the currently selected option. This is particularly useful when users need to understand their choices at a glance.
In order to create a menu with a checkmark feature we need to use the Picker in SwiftUI. By using the Picker we get the checkmark feature we want.
In the following we will create a menu with four options and if you click on one menu item, it will have a checkmark and close the menu down:
struct MenuExampleView: View {
var pickerOptions: [String] = ["Option 1","Option 2","Option 3","Option 4"]
@State var selectedOption = ""
var body: some View {
Menu {
Picker("Options", selection: $selectedOption) {
ForEach(pickerOptions, id: \.self) { option in
Text(option)
}
}
} label: {
Text("Menu")
}
}
}The result:
And now when you want to do some kind of action when the user picks a item, you simply add a .onChange modifier to your menu that listens to selectedOption:
.onChange(of: selectedOption) { newOption in
//Create your action here..
}
Wrap up SwiftUI menu
SwiftUI Menus are a powerful tool for enhancing the user experience in your app. They provide a clean and organized way to present actions, options, and settings. In many projects the native menu is just fine and will achieve what you want.
I hope you enjoyed the article and can use it in your next project 🙂