Create a dropdown menu in SwiftUI

In this tutorial, we will see how to create a dropdown menu in SwiftUI. Dropdown menus, also called selection menus, provide users with a practical way to select an option from a list.

We can create a dropdown list using the Picker view. The Picker view provides a convenient way to select one option from a list of choices.

Follow the steps below to create a dropdown menu in SwiftUI.

Define the data for the dropdown list

For this example, suppose we want to create a dropdown list for selecting a favorite color. Add the following code to the top of ContentView.swift.

import SwiftUI

struct ContentView: View {
    // Define an array of color options
    let colors = ["Red", "Blue", "Green", "Yellow", "Purple"]
    
    @State private var selectedColor = "Red" // Default selected color
    
    var body: some View {
        //Our view code will be added here
    }
}

In the above program, I have defined an array which is colors that contains several color options that will be displayed in the dropdown list.

Then, I declared a variable called selectedColor and marked it with the @State attribute. It will store the currently selected color from the dropdown list. The initial value is set to “Red“.

Add the Picker view to the body

Now, we have to add the Picker view to the body of the ContentView struct. Simply replace the comment in the body property with the following code.

VStack {
    Picker("Favorite Color", selection: $selectedColor) {
        ForEach(colors, id: \.self) { color in
            Text(color)
        }
    }
    .pickerStyle(MenuPickerStyle())
    .padding()
    
    Text("You selected: \(selectedColor)")
}

In the above program, I have used picker view that allows users to select an option from a list.

The parameter of the picker view selection: $selectedColor will bind the selectedColor variable to the picker. When the user selects an option, the value of selectedColor will be updated accordingly.

Then, inside the picker view I have used a ForEach loop to iterate over the colors array.

Now have a look at the complete code below

import SwiftUI

struct ContentView: View {

    // Define an array of color options
        let colors = ["Red", "Blue", "Green", "Yellow", "Purple"]
        
        @State private var selectedColor = "Red"
    
    var body: some View {
        VStack {
            Picker("Favorite Color", selection: $selectedColor) {
                ForEach(colors, id: \.self) { color in
                    Text(color)
                }
            }
            .pickerStyle(MenuPickerStyle())
            .padding()
            
            Text("You selected: \(selectedColor)")
        }
    }
}

The above code will create a vertical stack of views. The stack includes a Picker where the user can choose a favorite color from the list. Then a Text view will display the selected color.

The State property selectedColor ensures that the selected color is tracked and displayed correctly.

Output: