NavigationSplitViewVisibility is the type that controls sidebar (and content column) visibility in a NavigationSplitView. You create a @State property of this type and pass a Binding to the split view initializer.
Declaration
struct NavigationSplitViewVisibility
Usage pattern
@State private var columnVisibility = NavigationSplitViewVisibility.all
var body: some View { NavigationSplitView(columnVisibility: $columnVisibility) { SidebarView() } detail: { DetailView() } }
Visibility values
Value: .automatic Behavior: Default for the current device/context ──────────────────────────────────────── Value: .all Behavior: Show all columns (sidebar + content + detail) ──────────────────────────────────────── Value: .doubleColumn Behavior: Three-column: hide sidebar, show content + detail. Two-column: equivalent to .all ──────────────────────────────────────── Value: .detailOnly Behavior: Hide all leading columns, show only the detail
Key behavioral details
From the NavigationSplitView docs:
"The split view ignores the visibility control when it collapses its columns into a stack."
This means on iPhone or in compact size classes, columnVisibility has no effect — the split view always collapses to a single stack.
Initializers that accept columnVisibility
- Two-column: init(columnVisibility:sidebar:detail:)
- Three-column: init(columnVisibility:sidebar:content:detail:)
- Two-column + compact preference: init(columnVisibility:preferredCompactColumn:sidebar:detail:)
- Three-column + compact preference: init(columnVisibility:preferredCompactColumn:sidebar:content:detail:)
Sidebar toggle toolbar item
On some platforms (notably macOS), NavigationSplitView automatically adds a sidebar toggle button to the toolbar. To remove it:
NavigationSplitView { SidebarView() .toolbar(removing: .sidebarToggle) } detail: { DetailView() }
NavigationSplitViewStyle
Controls how columns interact visually. Three built-in styles:
- .automatic — platform default
- .balanced — leading columns and detail share equal prominence
- .prominentDetail — detail column takes visual precedence (leading columns overlay)
Apply with .navigationSplitViewStyle(.prominentDetail).
Sources
- https://developer.apple.com/documentation/swiftui/navigationsplitview — full struct docs with code examples
- https://developer.apple.com/documentation/swiftui/navigationsplitviewvisibility — enum values and usage
- https://developer.apple.com/documentation/SwiftUI/View/toolbar(removing:) — removing the default sidebar toggle
- https://developer.apple.com/documentation/swiftui/navigationsplitviewstyle — balanced vs prominentDetail
- https://developer.apple.com/documentation/technotes/tn3154-adopting-swiftui-naviga tion-split-view — backwards compatibility wrapper
- WWDC22: https://developer.apple.com/videos/play/wwdc2022/10054/ — mentions column configuration options
- WWDC22: https://developer.apple.com/videos/play/wwdc2022/10058/ — two-column sidebar/detail pattern
Related
- NavigationSplitViewColumn — enum for .sidebar, .content, .detail used with preferredCompactColumn
- navigationSplitViewColumnWidth(_:) / navigationSplitViewColumnWidth(min:ideal:max:) — control column widths
- "Bringing robust navigation structure to your SwiftUI app" — Apple's guide on navigation architecture