NavigationLink from a Menu SwiftUI

Question

How do I navigate to a new page programmatically from the user choosing an action on the Menu view in SwiftUI? What I have here isn't navigating when I choose an option.

Example Code:

struct MenuView: View {
    @State var oneActive: Bool = false
    @State var twoActive: Bool = false
    var body: some View {
    
        Menu {
            Button {
                oneActive = true
            } label: {
                Text("Option One")
            }
        
            Button {
                twoActive = true
            } label: {
                Text("Option Two")
            }
    
        } label: {
            Image(systemName: "ellipsis")
        }
    
        NavigationLink(destination: Text("Option One View"), isActive: $oneActive) { EmptyView() }
        NavigationLink(destination: Text("Option Two View"), isActive: $twoActive) { EmptyView() }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                ScrollView {
                    ForEach(0..<100, id: \.self) { index in
                        Text("\(index)")
                    }
                }
            }
            .navigationTitle("TItle")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    MenuView()
                }
            }
        }
    }
}

score 1 · Answer 1 · answered Jan 07 '22 at 23:02

The toolbar exists outside of the NavigationView hierarchy, which is why the NavigationLinks don't function within the MenuView. Instead, you can put the NavigationLinks inside the NavigationView and then send Bindings to the MenuView.

struct MenuView: View {
    @Binding var oneActive: Bool
    @Binding var twoActive: Bool
    
    var body: some View {
        Menu {
            Button {
                oneActive = true
            } label: {
                Text("Option One")
            }
        
            Button {
                twoActive = true
            } label: {
                Text("Option Two")
            }
    
        } label: {
            Image(systemName: "ellipsis")
        }
    }
}

struct ContentView: View {
    @State private var oneActive: Bool = false
    @State private var twoActive: Bool = false
    
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Text("Option One View"), isActive: $oneActive) { EmptyView() }
                NavigationLink(destination: Text("Option Two View"), isActive: $twoActive) { EmptyView() }
                ScrollView {
                    ForEach(0..<100, id: \.self) { index in
                        Text("\(index)")
                    }
                }
            }
            .navigationTitle("TItle")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    MenuView(oneActive: $oneActive, twoActive: $twoActive)
                }
            }
        }
    }
}

Please enlighten. I do not see any difference between the two. Also having problem with opening a new page from menu, and it is inside a NavigationView — chitgoks, Sep 11 '22 at 12:39
Check out the description, which details the difference. The NavigationLink has to be outside the Menu. — jnpdx, Sep 11 '22 at 14:30
Right. That was the main difference :D. Got it to work. thank you — chitgoks, Sep 12 '22 at 09:14

NavigationLink from a Menu SwiftUI

1 Answers1