TechnologiesSwiftUINavigation

NavigationSplitViewColumn struct

iOSmacOStvOSwatchOSvisionOSiOS 17.0+✓ renders

A view that represents a column in a navigation split view.

How it works

NavigationSplitViewColumn identifies one of the columns in a navigation split view — its sidebar, content, or detail region. You use it to read or steer which column a NavigationSplitView shows, most often when that view collapses into a single column on compact-width devices and needs to know which pane should appear first. Reach for it when you want code to drive the column presentation directly, rather than leaving the choice to the system's default behavior.

  1. Reference a column with the type's static cases

    NavigationSplitViewColumn exposes the columns of a split view as named values, so you address a specific pane symbolically instead of by index. The example seeds its state with .detail and later switches to .sidebar, naming each region directly rather than guessing at layout positions.

  2. Bind it through preferredCompactColumn

    Pass a binding to a NavigationSplitViewColumn into the preferredCompactColumn: initializer parameter of NavigationSplitView to declare which column surfaces when the layout collapses to a single column. Here NavigationSplitView(preferredCompactColumn: $preferredColumn) wires the split view to the preferredColumn state so the view honors that preference at compact width.

  3. Hold the choice in mutable state

    Because NavigationSplitViewColumn is a plain value, you store it in @State (or any binding source) and let SwiftUI track changes. The example declares @State private var preferredColumn: NavigationSplitViewColumn = .detail, giving the split view an initial preferred column and a place to record later updates.

  4. Reassign the value to move between panes

    Writing a new NavigationSplitViewColumn back into the bound state programmatically changes which column is presented. The Button("Show Sidebar") sets preferredColumn = .sidebar, so tapping it tells the collapsed split view to bring the sidebar forward.

Try it — Change the initial value = .detail on preferredColumn to = .sidebar and run in a compact layout to see the split view open on the mailbox list instead of the detail pane.

Example & preview

Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.

NavigationSplitViewColumn.swift
struct NavigationSplitViewColumnDemo: View {
    @State private var preferredColumn: NavigationSplitViewColumn = .detail
    @State private var selection: String? = "Inbox"

    var body: some View {
        NavigationSplitView(preferredCompactColumn: $preferredColumn) {
            List(selection: $selection) {
                Text("Inbox").tag("Inbox")
                Text("Sent").tag("Sent")
                Text("Drafts").tag("Drafts")
            }
            .navigationTitle("Mailboxes")
        } detail: {
            VStack(spacing: 12) {
                Text(selection ?? "No selection")
                    .font(.title2)
                Button("Show Sidebar") {
                    preferredColumn = .sidebar
                }
            }
            .padding()
        }
    }
}
Live preview
Inbox Sent Drafts
Inbox Sent Drafts
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →