NavigationSplitView: Adaptive Layouts for All Screen Sizes

WHY IT EXISTS Before SwiftUI, creating adaptive UIs that worked on both iPhone and iPad required manually managing a complex component called UISplitViewController. NavigationSplitView was created to provide a declarative, SwiftUI-native way to build multi-column layouts that work across all Apple platforms with minimal boilerplate code.

THE MENTAL MODEL Think of NavigationSplitView as a responsive web layout, but for native apps. It's a container that manages up to three columns: a sidebar, a content list, and a detail view. On a large screen, like an iPad in landscape, it shows all columns side-by-side. On a small screen, like an iPhone in portrait, it automatically shows only one column at a time, letting the user navigate through them like a standard navigation stack.

HOW IT WORKS You initialize a NavigationSplitView with closures that define the views for each column you need. The most common setup is a two-column or three-column layout. You use @State variables to track the selected item in each column. When a user taps an item in the sidebar, you update a state variable, which causes SwiftUI to update the content column. Tapping the content column does the same for the detail column. The view handles the presentation logic (side-by-side vs. stack) based on the device's horizontal size class.

WHEN TO USE IT Use NavigationSplitView for any app that presents hierarchical data where users drill down from broad categories to specific items. It's the standard choice for the main interface of document-based apps, mail clients, note-taking apps, or any app that benefits from a master-detail layout on larger screens. It is the modern replacement for the older NavigationView.

WHEN NOT TO USE IT Avoid NavigationSplitView for simple, linear flows where the user only moves forward and backward, like a setup wizard or a single-task workflow. For those, a NavigationStack is simpler and more appropriate. Using a split view for a single, non-hierarchical list of items is overkill and creates a confusing user experience.

ONE CANONICAL EXAMPLE Consider Apple's Mail app on iPad. The sidebar lists your accounts and mailboxes. Selecting a mailbox populates the middle content column with a list of emails. Tapping an email displays its full content in the detail column on the right. On an iPhone, you would tap through these three views one by one, with each new view pushing onto the stack.