How it works
A type that conforms to NavigationSplitViewStyle describes how a NavigationSplitView arranges and prioritizes its columns. SwiftUI applies a default style automatically, so you only adopt one when you want to override how the sidebar, content, and detail columns share space and how they collapse on compact widths. Rather than constructing a style value directly, you select one of the built-in styles through the navigationSplitViewStyle(_:) modifier, which writes the chosen style into the environment for the enclosing split view to read.
Build the column layout the style governs
NavigationSplitViewStyleonly takes effect on aNavigationSplitView, so the style needs columns to act on. Here the sidebar column is aListoffoldersand the trailingdetail:column shows the currentselection; the style decides how these two columns are laid out and which one is emphasized.Apply a style with navigationSplitViewStyle(_:)
You attach a style by calling
.navigationSplitViewStyle(_:)on theNavigationSplitView. The modifier accepts any value conforming toNavigationSplitViewStyleand places it into the environment, where the split view resolves it when laying out its columns. In the example this is.navigationSplitViewStyle(.balanced).Choose among the built-in conforming styles
SwiftUI ships concrete conformances you reference through static members instead of initializing yourself:
.automaticfor the system default,.balancedto give the detail column room while keeping the leading columns visible, and.prominentDetailto favor the detail column so it stays full-width even when a leading column is showing. The demo selects.balanced.Let the style drive collapse behavior
Because the style is read by the
NavigationSplitView, it also influences how columns overlay or collapse as available width shrinks. The sameselectionbinding that drives theListand thedetail:content keeps working unchanged; switching the style changes only the spatial arrangement, not the data flow.
.navigationSplitViewStyle(.balanced) to .navigationSplitViewStyle(.prominentDetail) and watch the detail column stay full-width while the Mailboxes sidebar overlays instead of pushing it aside.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.
struct NavigationSplitViewStyleDemo: View {
@State private var selection: String? = "Inbox"
let folders = ["Inbox", "Sent", "Drafts"]
var body: some View {
NavigationSplitView {
List(folders, id: \.self, selection: $selection) { folder in
Text(folder)
}
.navigationTitle("Mailboxes")
} detail: {
Text(selection ?? "No selection")
.font(.title)
.padding()
}
.navigationSplitViewStyle(.balanced)
}
}