Menu in SwiftUI


SwiftUI comes with a built-in dedicated control to present the menu of actions. SwiftUI Menu control makes it easy for creating popup menus from a button which is called Menu.

Show a menu

Below is given an example where you can see how easily we can show a menu in SwiftUI:

        
        Menu("Menu Button") {
             Button("Menu 1", action: { print("Action for menu 1") })
             Button("Menu 2", action: { print("Action for menu 2") })
             Menu("Menu 3") {
                 Button("Submenu 1", action: { print("Action for submenu 1") })
                 Button("Submenu 2", action: { print("Action for submenu 2") })
             }
         }

In the above example, we have 3 menu items. You can notice that the first two items are Button control and the third one is Menu control. This is because we want the third one to contain submenu items. Whenever we want to create submenus, we have to declare another menu inside the menu instead of Button.

If we run it on a device, it will look like you can see in the GIF image below:

SwiftUI Menu

In the action method of menu items, you can see that we are printing some messages. We have to place the code in the action menu that we want to run whenever we click the menu button. Below is a code snippet for a better understanding:

  
        Menu("Menu Button") {
             Button("Menu 1", action: {
                 // Code block for Menu 1. Clicking this menu button will run this block of code
                 print("Menu 1 button clicked")
             })
         }
        

Keep the action code block in separate functions

Instead of writing the action code along with the menu button, it is possible to separate it in different functions. It will help to make your code clean and give more readability. Below is how we can do it:


    var body: some View {
        
        Menu("Show Menus") {
            Button("Add", action: add)
            Button("Remove...", action: remove)
            Menu("New") {
                Button("Document", action: document)
                Button("PDF Document", action: pdfDocument)
            }
        }
          
   }
    
    
    
    func add() {
        print("Add menu action")
    }
    
    func remove() {
        print("Remove menu action")
    }
    
    func document() {
        print("Document submenu action")
    }
    
    func pdfDocument() {
        print("PDF Document submenu action")
    }
  

You can see in the above code, that we have created a Menu view in SwiftUI. We have total of 4 menu items including the submenus. Here we are not placing our action code block in along with the Menu buttons. Instead, we have created functions for each menu action and called the function name in the action.

Menu label with menu icon

You can use a menu label for showing a Menu text and image or icon. Below is an example:


        Menu {
            Button("Save as PDF", action: { print("Save document as PDF") })
            Button("Save as Docx", action: { print("Save document as Docx") })
        } label: {
            Image(systemName: "doc")
            Text("Save Document")
        }

As you can see, in this case, we have not provided the label text in the Menu control. We set the label in the label modifier. We have also set the image that acts like a menu icon. Below is the GIF image that shows how it looks:

SwiftUI Menu with Menu icon