How to display the menu uncollapsed on navigationBar?

Question

I want to display a picker with several options to choose one of them. I could do it but the problem is that the menu shows collapsed.

How can I show the menu display uncollapsed?

Example Code:

struct TestingView: View {

enum Options: String, CaseIterable {
    case option1
    case option2
    case option3
}

@State var selectedOrder: Options = .option1

var body: some View {
    NavigationStack{
        VStack {
            Text("Custom Text")
        }
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Menu {
                    Picker("Order by", selection: $selectedOrder) {
                        ForEach(Options.allCases, id: \.self) {
                            Text($0.rawValue)
                        }
                    }
                    .pickerStyle(.menu)
                } label: {
                    Image(systemName: "arrow.up.arrow.down")
                }
            }
        }
    }
}}

Answer 1

When we use picker inside menu, it is rendered as sub-menu. You may use below code. Checkmark image's position can't be changed.

.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        Menu {
            ForEach(Options.allCases, id: \.self) { option in
                Button(action: {
                    selectedOrder = option
                }, label: {
                    if selectedOrder == option {
                        Image(systemName: "checkmark")
                    }

                    Text(option.rawValue)
                })
            }
        } label: {
            Image(systemName: "arrow.up.arrow.down")
        }
    }
}

Output: https://i.stack.imgur.com/ydM3S.png