How it works
A NavigationLink is a view that controls a navigation presentation: when a person taps it, the enclosing navigation stack pushes an associated destination view onto the screen. Use it to build drill-down, hierarchical interfaces — a list of items where selecting a row reveals the detail behind it. Place a NavigationLink inside a container managed by a NavigationStack so that the link has somewhere to push its destination, and SwiftUI takes care of the transition, the back button, and the navigation bar for you.
Present a destination with a text title
The simplest initializer pairs a string label with a destination view. NavigationLink(_:destination:) renders the title as a tappable row and pushes the destination when activated, as in
NavigationLink("Inbox", destination: Text("Inbox").font(.largeTitle)), where"Inbox"is the visible label and theTextview is what appears after the tap.Supply a custom label with trailing closures
When a plain string isn't enough, use the initializer that takes a
destinationbuilder and alabelbuilder. This lets the link's appearance be any view — here thelabel:closure returns aLabel("Drafts", systemImage: "pencil")so the row shows an icon alongside its text, while thedestinationclosure provides theText("Drafts")view to push.Anchor the link inside a NavigationStack
A NavigationLink only navigates when it has an enclosing navigation container to drive the push. The links here live inside a
NavigationStack, which owns the navigation state and animates each destination onto the stack; without that surroundingNavigationStack, the link would have no presentation context.Group links in a List for a drill-down menu
NavigationLink is commonly used as a row inside a
List, where each link becomes a selectable entry that styles itself with the platform's disclosure chevron. The three links sit together in theList, turning it into a menu whose rows —Inbox,Sent, andDrafts— each lead to their own detail screen.Title the pushed screens
Apply
navigationTitle(_:)to the content inside the stack to label the navigation bar, and SwiftUI threads that title and the automatic back button through each push. The.navigationTitle("Mail")modifier names the root screen, and the destinations supplied to each NavigationLink inherit the bar and back-navigation as they are pushed.
destination of the "Sent" link from Text("Sent").font(.largeTitle) to a second List containing its own NavigationLink, then tap through to watch the stack push twice and the back button walk you back one level at a time.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 NavigationLinkDemo: View {
var body: some View {
NavigationStack {
List {
NavigationLink("Inbox", destination: Text("Inbox").font(.largeTitle))
NavigationLink("Sent", destination: Text("Sent").font(.largeTitle))
NavigationLink {
Text("Drafts").font(.largeTitle)
} label: {
Label("Drafts", systemImage: "pencil")
}
}
.navigationTitle("Mail")
}
.padding()
}
}