How to push a new view onto a NavigationStack

Paul Hudson @twostraws December 1st 2022

Updated for Xcode 14.2

SwiftUI lets us push any view onto a NavigationStack by using NavigationLink. In its simplest form you can provide this with a string for its title and a destination view as a trailing closure, and NavigationStack will care of pushing the new view on the stack for us along with animation.

For example, this creates a simple DetailView struct, then presents it from a NavigationStack:

struct DetailView: View {
    var body: some View {
        Text("This is the detail view")
    }
}

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink("Show Detail View") {
                    DetailView()
                }
            }
            .navigationTitle("Navigation")
        }
    }
}

Download this as an Xcode project

If you need more advanced control over the label, pass it as a secondary trailing closure. For example, this uses a Label view rather than a simple string:

struct DetailView: View {
    var body: some View {
        Text("This is the detail view")
    }
}

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink {
                    DetailView()
                } label: {
                    Label("Show Detail View", systemImage: "globe")
                }
            }
            .navigationTitle("Navigation")
        }
    }
}

Download this as an Xcode project

SwiftUI will automatically style your links as buttons so users know they are interactive. You can disable this behavior by applying .buttonStyle(.plain) to NavigationLink.

How to push a new view onto a NavigationStack

Similar solutions…