tezvyn:

NavigationLink: Pushing Views in SwiftUI

AI-drafted, machine-checkedSource: developer.apple.comintermediate
NavigationLink: Pushing Views in SwiftUI

NavigationLink is SwiftUI's declarative way to push a new view onto a navigation stack. You use it inside a `NavigationStack` to create drill-down UIs, like tapping a list item to see its details. The footgun is forgetting the parent `NavigationStack`.

WHY IT EXISTS: Before SwiftUI, navigation in UIKit was imperative. A developer would manually create a new view controller and call a function like pushViewController. SwiftUI needed a declarative way to express "when this is tapped, show that view" that integrates with its state-driven, compositional nature. NavigationLink is that solution.

THE MENTAL MODEL: Think of NavigationLink as a special button that is aware of a parent navigation container. It has two key parts: a label (what the user sees and taps, like text or an image) and a destination (the view to be pushed onto the stack when the label is tapped). It declaratively links a user action to a navigation event.

HOW IT WORKS: A NavigationLink must be placed inside a NavigationStack (or the older NavigationView) to function. When a user taps the link's label, SwiftUI finds this parent stack, creates the destination view you've specified, and pushes it onto the stack, animating the new view in from the side. The modern approach uses a value-based initializer (NavigationLink(value: someData, ...)). This pairs with a .navigationDestination modifier on the stack, which tells the stack how to build a destination view for a given type of data. This decouples the link from the destination's creation, making navigation logic cleaner and more type-safe.

WHEN TO USE IT: Use NavigationLink for standard hierarchical "push" navigation. This is perfect for master-detail flows where a user selects an item from a list to see its details. It's also the correct choice for navigating through nested settings menus or any content that has a clear parent-child structure. The system automatically provides a back button.

WHEN NOT TO USE IT: Do not use NavigationLink for presenting content modally. For pop-up sheets, full-screen takeovers, or popovers, use the .sheet(), .fullScreenCover(), or .popover() modifiers instead. It is also not meant for non-hierarchical navigation, like switching between the main sections of an app, which is a job for TabView.

ONE CANONICAL EXAMPLE: A list of products where tapping a product shows its detail screen. You would place a List inside a NavigationStack. Each row in the list would contain a NavigationLink whose value is the product for that row. A single .navigationDestination(for: Product.self) modifier on the list then defines how to create a ProductDetailView for any product that gets tapped, keeping the logic centralized.

Read the original → developer.apple.com

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.