How to Use NavigationSplitView in SwiftUI

In iOS 16, other than introducing the new NavigationStack, Apple also released a new view container named NavigationSplitView for developers to create two or three column navigation interface. If you want to build UI similar to the stock Mail app, you should check out this split view component.

While NavigationSplitView is more suitable for iPadOS and macOS apps, you can also use it on apps for iPhone. The view component automatically adapts itself for iPhone. Instead of displaying a multi-column interface, it creates a single-column experience.

The new NavigationSplitView comes with various options for you to customize its appearance and operations. You can change the column width and programmatically show/hide the columns.

In this tutorial, we will create a three-column navigation UI using NavigationSplitView.

Let’s get started.

The Basic Usage of NavigationSplitView

The NavigationSplitView supports both two-column and three-column navigation experience. Their implementations are quite similar. To create a two-column navigation UI, you write the code like this:

NavigationSplitView {
 // Menu bar
} detail: {
 // Detail view for each of the menu item
}

For 3-column navigation interface, you add the content parameter in between:

NavigationSplitView {
 // Menu bar
} content: {
 // Sub menu
} detail: {
 // Detail…