Multi-Column Layout
Intro
Columns are used to arrange UI elements. A layout may include one or two visible columns of different widths, adjusting dynamically to the size class. Large devices may show up to three columns.
When there are multiple columns, it’s important to consider the size of each one. For example, in a list-detail layout, the list should have a fixed width, and the detail column should be flexible to respond to the available space. This ensures that the layout remains visually appealing and resizes for the different size classes.
In compact size class, only one column should be used. In regular size class, two to three columns are possible.
The SwiftUI class navigation split view allows to build multi-column layout apps that scale across all Apple platforms, including watchOS. On large devices with iPadOS or visionOS, multiple columns are displayed side by side. On devices with narrow screens such as iPhone, iPad in slide over, or Apple Watch, all columns are collapsed into a stack.
Each column has its own navigation bar and an optional toolbar. Columns can be shown or hidden as needed. The primary column is often used for the sidebar as the central point of navigation. The second column often contains a list, while the third column contains the details. Changes in one column trigger changes in the content of the other column. For more information, see WWDC Video “Build for iPad”.
Multi-column layout converts from regular size to stacked navigation on compact size
Layouts
The SwiftUI class “NavigationSplitView” supports layouts with two or three columns. In both layouts, when users make a selection in a leading column, it affects the way content is presented in any subsequent column. The first column usually contains the sidebar, while the other columns can hold any type of content.
Two-Column Layout
A two-column layout includes a sidebar in one column and a detail view right next to it in another column. You can hide the sidebar to show only the details. The width of the detail column is flexible and stretches across the available space.
Two-column layout with sidebar and details (left) and the same layout with a hidden sidebar showing the details only (right)
Three-Column Layout
A three-column layout includes a sidebar, a content column, and a detail column. Selecting an item in the first column that holds the sidebar affects the second column, which is the content column. A selection in the content column influences the third column, the detail column.
If the content column contains a list, the detail column shows details about the selected list item.
The sidebar and the content column have a fixed width. The width of the detail column is flexible and fills the rest of the available screen space.
The sidebar and the content column can be hidden to show only the details.
On regular screens, all columns are displayed side by side. On compact screens, all columns are collapsed into a single stack on top of each other. The order of the stack is automatically defined by the system.
Three-column layout with sidebar, content column, and detail column
Inspector
The SwiftUI inspector is an auxiliary column that displays context-dependent information about the primary content. It provides additional information and displays further details about the selected content. In productivity apps, the inspector is used as a property panel, such as for selecting an element within a document.
The inspector can extend any layout through a trailing column. It is not limited to the navigation split view and can be used with any layout.
Users can show or hide the inspector using a button in the navigation bar. It is not recommended adding layers of navigation within the inspector, such as a push navigation, as the inspector should be the final element of information displayed.
The inspector has a fixed width, while the detail column takes up the remaining space. Content within the inspector can be scrolled. On regular screens, the inspector appears next to the detail column. On split screens, it is displayed as an overlay. In compact layouts, the inspector adjusts to a resizable sheet. The inspector is available for MacOS, iPadOS & iOS.
SwiftUI inspector on regular screen as a trailing column (left) and on compact screen as a sheet
Two-Column Layout with Inspector
A two-column navigation split view layout can be extended by an inspector as a trailing column. The width of the detail column reduces to make space for the inspector, with the system automatically adjusting the size of the detail column.
Two-column layout with sidebar, detail column, and inspector (left) and hidden sidebar, detail column, and inspector (right)
Three-Column Layout with Inspector
A three-column layout can be extended by an inspector. If all three columns are already visible and the inspector is opened in a new column, the sidebar in the first column is hidden.
Three-column layout with content column, detail column, inspector, and hidden sidebar (left) and detail column, hidden content column, hidden sidebar, and inspector (right)