Navigating with columns with NavigationSplitView

One of the things that we know when building apps for padOS or macOS is that we need to take advantage of the big screen. But what does it mean? Sometimes, it might mean working with a grid instead of a list. However, in the context of navigation, it means that we can work with several columns when each of the columns shows a different view instead of replacing the whole screen each time the user navigates.

In other words – we need to split the screen.

To do that, we can work with a view called NavigationSplitView, which presents views in two or three columns.

When a user selects an item of one view, it updates the view in the other columns.

Creating NavigationSplitView

To demonstrate how to use NavigationSplitView, we will use our music app example and adjust it to padOS.

Let’s start with some important terms – we have three different column types:

• Sidebar: The first column from the left...