NavigationStack in iOS Swift

Introduction

NavigationStack helps you move between screens in your app easily. It keeps track of where you are and lets you go back.

When you want to open a new screen after a button tap.

When you want users to go back to the previous screen.

When your app has multiple pages linked in a flow.

When you want to show details after selecting an item.

When you want to keep a history of visited screens.

Syntax

iOS Swift

NavigationStack {
    // Your views here
}

// To navigate to a new screen:
NavigationLink(destination: YourNextView()) {
    Text("Go to next screen")
}

NavigationStack replaces older NavigationView for better control.

Use NavigationLink inside NavigationStack to move to new screens.

Examples

Basic NavigationStack with one screen.

iOS Swift

NavigationStack {
    Text("Home Screen")
}

NavigationLink inside NavigationStack to move to a detail screen.

iOS Swift

NavigationStack {
    NavigationLink(destination: Text("Detail Screen")) {
        Text("Go to Detail")
    }
}

NavigationStack with a list of items. Tap an item to see its detail.

iOS Swift

NavigationStack {
    List(items, id: \.self) { item in
        NavigationLink(destination: Text(item)) {
            Text(item)
        }
    }
}

Sample App

This app starts with a home screen inside a NavigationStack. It shows a button. When you tap it, you go to a detail screen. You can go back using the top back button automatically provided.

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack(spacing: 20) {
                Text("Welcome to Home Screen")
                    .font(.title)
                NavigationLink(destination: DetailView()) {
                    Text("Go to Detail Screen")
                        .foregroundColor(.blue)
                        .padding()
                        .background(Color.gray.opacity(0.2))
                        .cornerRadius(8)
                }
            }
            .navigationTitle("Home")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("This is the Detail Screen")
            .font(.title2)
            .navigationTitle("Detail")
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Important Notes

NavigationStack manages a stack of views, showing the top one.

NavigationLink pushes a new view onto the stack.

Going back pops the top view off the stack automatically.

Summary

NavigationStack helps organize screens in a stack for easy navigation.

Use NavigationLink inside NavigationStack to move between screens.

The system provides back navigation automatically.