The New Navigation System in SwiftUI

Photo by Dan Chung on Unsplash

For a long time, developers have criticized SwiftUI’s navigation system. Due to the limitations of NavigationView, developers had to use various tricks and even black technology to achieve some basic functions (such as returning to the root view, adding any view to the stack, returning to any level view, Deep Link jump, etc.).

SwiftUI 4.0 (iOS 16+, macOS 13+) has made significant changes to the navigation system, providing a new API that manages views as a stack, making it easy for developers to implement programmatic navigation. This article will introduce the new navigation system.

Stay ahead with the latest updates and deep insights on Swift, SwiftUI, Core Data, and SwiftData. Subscribe to Fatbobman’s Swift Weekly to get exclusive articles, tips, and curated resources delivered straight to your inbox every week.

For even more valuable content and in-depth tutorials, visit my blog at fatbobman.com — your go-to destination for all things Swift and Apple development.

Divide into two

The most direct change in the new navigation system is to abandon NavigationView and split its functions into two separate controls: NavigationStack and NavigationSplitView.

NavigationStack is designed for single-column scenarios, such as iPhone, Apple TV, and Apple Watch:

NavigationStack {}
// Equivalent to
NavigationView{}
    .navigationViewStyle(.stack)

NavigationSplitView is designed for multi-column scenarios, such as iPadOS and macOS:

NavigationSplitView {
   SideBarView()
} detail: {
   DetailView()
}

// Corresponds to dual-column scenarios
NavigationView {
    SideBarView()
    DetailView()
}
.navigationViewStyle(.columns)

NavigationSplitView {
    SideBarView()
} content: {
    ContentView()
} detail: {…