How it works
A NavigationStack presents a stack of views over a root view, giving people a clear way to drill into detail and a built-in path back to where they started. It manages a last-in, first-out navigation history: pushing a new view as someone selects a destination, and popping back as they return. Reach for NavigationStack whenever your interface progresses from a list or summary into deeper levels of content, such as moving from a roster of items to a single item's detail.
Wrap your root content in NavigationStack
NavigationStack takes a view builder describing the root — the first screen of the stack — and supplies the navigation bar and the chrome that hosts pushed destinations. Here the stack's root is the
List(fruits, ...)that people start from before navigating deeper.Push destinations with NavigationLink
Inside a NavigationStack, a
NavigationLinkpairs a label with a destination view; activating it pushes that destination onto the stack and animates the transition. In the example eachNavigationLink(fruit)pushes theText("You picked \(fruit)")detail when its row is tapped.Label the stack with navigationTitle(_:)
Apply navigation modifiers to the content inside the stack, not to NavigationStack itself, so the active screen can configure the shared navigation bar. The
.navigationTitle("Fruits")attached to theListgives the root level its bar title, and pushed destinations can set their own.Rely on the automatic back control
Because NavigationStack tracks the order of pushed views, it provides a back button that pops the top view and returns to the previous one without any extra code. Selecting a fruit shows its
Textdetail; the system back control returns to theListroot.
Text("You picked \(fruit)") content so it links onward — to watch NavigationStack push a third level and grow the back trail.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct NavigationStackDemo: View {
let fruits = ["Apple", "Banana", "Cherry"]
var body: some View {
NavigationStack {
List(fruits, id: \.self) { fruit in
NavigationLink(fruit) {
Text("You picked \(fruit)")
.font(.title)
.padding()
}
}
.navigationTitle("Fruits")
}
}
}