How it works
A NavigationView presents a stack of views over a navigation context, giving its content a place to push and pop destinations and to display a navigation bar. Reach for it when one view needs to drill down into another — a list of items that leads to a detail screen, for example — so that SwiftUI can manage the back-and-forth transitions and the title bar for you. It establishes the environment that links such as NavigationLink rely on to know where their destinations should appear.
Wrap your content in NavigationView
NavigationViewtakes a view builder and treats the view you supply as the root of a navigation hierarchy. Here theListof links becomes that root, so everything inside gains a navigation bar and the ability to present pushed destinations.Drive transitions with NavigationLink
A
NavigationViewis what makesNavigationLinkactionable: each link describes a destination that the navigation view pushes onto the stack when tapped. The"Inbox"and"Sent"links each carry their own destination view, andNavigationViewperforms the push and supplies the back button automatically.Title the bar with navigationTitle(_:)
The
navigationTitle(_:)modifier sets the text shown in the navigation bar thatNavigationViewprovides. Applying it to the rootListproduces the"Mail"title, while applying it inside each destination —"Inbox"and"Sent"on the detailTextviews — updates the bar as the user drills in.Place destinations along the stack
Because
NavigationViewowns a single column of pushed views, the destination attached to eachNavigationLinkis shown in that column when selected. TheText("Inbox details")destination, for instance, replaces the list region once"Inbox"is activated, withNavigationViewkeeping the prior screens available behind the back button.
NavigationLink("Drafts") with its own Text destination inside the List, then tap it at runtime to watch NavigationView push and title the new screen.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 NavigationViewDemo: View {
var body: some View {
NavigationView {
List {
NavigationLink("Inbox") {
Text("Inbox details")
.navigationTitle("Inbox")
}
NavigationLink("Sent") {
Text("Sent details")
.navigationTitle("Sent")
}
}
.navigationTitle("Mail")
}
}
}