NavigationView: basics, navigation stack in SwiftUI apps

What is NavigationView?

NavigationView is a SwiftUI container that wraps a hierarchy of screens and provides a navigation interface. Inside NavigationView, NavigationLink works — an element that replaces the current screen with a new one when pressed. NavigationView automatically adds a navigation bar with a title and a back button.

NavigationView was introduced in iOS 13 alongside SwiftUI. Conceptually, it replaces UINavigationController from UIKit but is implemented declaratively. Instead of manual push/pop, the developer describes the relationship between screens using NavigationLink. The system automatically manages the stack.

NavigationView supports modifiers .navigationTitle, .navigationBarTitleDisplayMode, .toolbar and .searchable. For iOS 16+, Apple introduced NavigationStack, which preserves the NavigationView API but adds programmatic stack management via NavigationPath. For projects supporting iOS 15 and below, NavigationView remains the only option.

NavigationLink and Screen Transitions

NavigationLink is a SwiftUI element that creates a transition to a target screen inside NavigationView or NavigationStack. When NavigationLink is pressed, the system adds the target screen to the navigation stack. The transition animation is the standard push from the right on iOS, adapting to the platform.

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(items) { item in
                NavigationLink(destination: DetailView(item: item)) {
                    Text(item.title)
                }
            }
            .navigationTitle("List")
        }
    }
}

struct DetailView: View {
    let item: Item

    var body: some View {
        VStack {
            Text(item.description)
                .navigationTitle(item.title)
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

NavigationLink takes two parameters: destination — the target View, and label — the element the user presses. For lists, the syntax with value and NavigationLink(value:) is convenient — it automatically unselects the cell and works with NavigationPath.

NavigationStack vs NavigationView: API Comparison

With iOS 16, Apple introduced NavigationStack as a replacement for NavigationView. NavigationStack preserves the declarative syntax but adds a critically important feature — programmatic stack management through the path property of type NavigationPath or an array of Hashable.

For projects with a minimum version of iOS 16+, use NavigationStack. For iOS 14-15 support — NavigationView. NavigationStack has no direct analogs for older versions, so upgrading requires compatibility checking.

Toolbar and navigationTitle Configuration

The .toolbar and .navigationTitle modifiers control the content of the navigation bar. .navigationTitle sets the screen title, .navigationBarTitleDisplayMode selects the style: .large (prominent, default) or .inline (compact, like in Settings). .toolbar adds buttons, search, and segmented control.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profile") {
                    Text("Username")
                    Toggle("Notifications", isOn: $notifications)
                }
            }
            .navigationTitle("Settings")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Save") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable is another modifier that integrates a search bar into the navigation bar. Works with both NavigationView and NavigationStack. The search bar automatically hides when scrolling and appears when swiping down. Supports list filtering via a Binding String.

Programmatic Navigation with NavigationPath

NavigationPath is an iOS 16+ type that represents a navigation stack as a collection of Hashable values. The developer adds elements to path for programmatic transitions, removes them for returning. NavigationPath supports deep links, push notifications, and state restoration.

struct AppNavigation: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            List(categories) { category in
                NavigationLink("Category \(category.name)",
                               value: category)
            }
            .navigationTitle("Categories")
            .navigationDestination(for: Category.self) { category in
                ProductListView(category: category)
            }
            .navigationDestination(for: Product.self) { product in
                ProductDetailView(product: product)
            }
        }

        // Programmatic deep link navigation
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) registers a data type for which to show a screen. When a value of this type is added to the path, the system automatically creates the target View. This approach replaces explicit NavigationLink(destination:) and makes navigation strictly typed.

NavigationView on iPad, watchOS and tvOS

NavigationView and NavigationStack work on all Apple platforms: iOS, iPadOS, watchOS, tvOS and macOS. Behavior adapts to the screen. On iPad, NavigationStack supports NavigationSplitView, which replaces UISplitViewController from UIKit and displays two columns on a wide screen.

NavigationSplitView (iOS 16+) splits the screen into sidebar (list) and detail. On iPhone, the sidebar is hidden, showing only detail via NavigationLink. On iPad, sidebar and detail are displayed simultaneously in split mode.

struct AdaptiveNavigation: View {
    @State private var selectedCategory: Category?

    var body: some View {
        NavigationSplitView {
            List(categories, selection: $selectedCategory) { category in
                Text(category.name)
            }
            .navigationTitle("Categories")
        } detail: {
            ProductListView(category: selectedCategory)
        }
    }
}

NavigationSplitView automatically selects the optimal display mode for each device. On iPhone in portrait — stack, on iPad and iPhone in landscape — split. The developer doesn't need to write separate code for different size classes.