TechnologiesSwiftUI

ProminentDetailNavigationSplitViewStyle struct

iOSmacOStvOSwatchOSvisionOSiOS 16.0+✓ renders

A navigation split style that attempts to maintain the size of the

How it works

ProminentDetailNavigationSplitViewStyle is a NavigationSplitViewStyle that biases a multi-column NavigationSplitView toward its detail column, keeping the detail content prominent while the leading sidebar and content columns yield space or collapse around it. Reach for it when the detail view is the focus of the interface — a reading pane, an editor, a media canvas — and the navigation columns are secondary aids rather than the main event. Apply it through the navigationSplitViewStyle(_:) modifier using the .prominentDetail shorthand, rather than instantiating the type directly.

  1. Build a multi-column NavigationSplitView

    The style only takes effect on a NavigationSplitView, so the structure that hosts it comes first: a sidebar column with a List of folders driven by a selection binding, and a detail: closure that presents the chosen item. The split view is what the style reshapes; everything else is the content it arranges.

  2. Apply the style with navigationSplitViewStyle(_:)

    navigationSplitViewStyle(_:) is the entry point that sets the column-balancing behavior for the whole NavigationSplitView it's attached to. Here .navigationSplitViewStyle(.prominentDetail) selects this style for the view, replacing the default balanced layout.

  3. Select the value with .prominentDetail

    .prominentDetail is the static shorthand on NavigationSplitViewStyle that resolves to a ProminentDetailNavigationSplitViewStyle instance, so you rarely name the type or call its initializer yourself. Passing it to navigationSplitViewStyle(_:) tells SwiftUI to favor the detail column, letting the Text(selection ?? "Select a folder") pane keep its prominence as the layout adapts.

  4. Drive the detail through selection

    Because the style emphasizes the detail column, the binding that feeds it matters: the List's selection: $selection updates @State private var selection, and the detail: closure renders that value. The prominent detail is what the user reads, so the selection-driven content is what the style keeps in front.

Try it — Change .navigationSplitViewStyle(.prominentDetail) to .navigationSplitViewStyle(.balanced) and compare how much space the sidebar List keeps versus the detail Text as the window resizes.

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.

ProminentDetailNavigationSplitViewStyle.swift
struct ProminentDetailNavigationSplitViewStyleDemo: 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("Mail")
        } detail: {
            Text(selection ?? "Select a folder")
                .font(.title2)
                .padding()
        }
        .navigationSplitViewStyle(.prominentDetail)
    }
}
Live preview
Inb…
Inb…
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →