TechnologiesSwiftUINavigation

NavigationSplitViewStyleConfiguration struct

iOSmacOStvOSwatchOSvisionOSiOS 16.0+✓ renders

The properties of a navigation split view instance.

How it works

NavigationSplitViewStyleConfiguration carries the resolved properties of a navigation split view to a custom NavigationSplitViewStyle. When you define your own split-view style, SwiftUI hands you this configuration so your makeBody(configuration:) implementation can describe how the columns should look and lay out without rebuilding the navigation behavior itself. Reach for it whenever the built-in styles aren't enough and you want a reusable, app-wide appearance for every NavigationSplitView that adopts your style.

  1. Conform to NavigationSplitViewStyle to receive a configuration

    A custom style is a type that conforms to NavigationSplitViewStyle. SwiftUI calls into it for each split view that adopts the style, which is where the configuration enters the picture. In the example, FramedSplitStyle declares this conformance so it can supply a shared look for the split views it styles.

  2. Read the configuration in makeBody(configuration:)

    The protocol's single requirement, makeBody(configuration:), receives a NavigationSplitViewStyleConfiguration and returns the styled view. This method is the one place you transform the split view's resolved properties into concrete SwiftUI content. The example's func makeBody(configuration: NavigationSplitViewStyleConfiguration) -> some View is where the framing is composed.

  3. Build the styled body around the configuration

    Inside makeBody, you assemble the view hierarchy that represents the split view in your style, applying whatever modifiers express your design. Here the body wraps a NavigationSplitView and decorates it with .padding(8) and .background(.blue.opacity(0.1)), so every split view using this style picks up the same framed treatment.

  4. Apply the style with navigationSplitViewStyle(_:)

    You attach your custom style to a navigation split view using the navigationSplitViewStyle(_:) modifier, which is what triggers SwiftUI to construct the NavigationSplitViewStyleConfiguration and route it to your makeBody. In body, .navigationSplitViewStyle(FramedSplitStyle()) hands the real NavigationSplitView over to the style for rendering.

Try it — Change .background(.blue.opacity(0.1)) inside FramedSplitStyle's makeBody to .background(.green.opacity(0.3)) and watch every split view styled with FramedSplitStyle adopt the new framing through the same configuration.

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.

NavigationSplitViewStyleConfiguration.swift
struct NavigationSplitViewStyleConfigurationDemo: View {
    struct FramedSplitStyle: NavigationSplitViewStyle {
        func makeBody(configuration: NavigationSplitViewStyleConfiguration) -> some View {
            NavigationSplitView {
                List(["Inbox", "Sent", "Drafts"], id: \.self) { item in
                    Text(item)
                }
                .navigationTitle("Mail")
            } detail: {
                Text("Select a folder")
                    .foregroundStyle(.secondary)
            }
            .padding(8)
            .background(.blue.opacity(0.1))
        }
    }

    var body: some View {
        NavigationSplitView {
            Text("Sidebar")
        } detail: {
            Text("Detail")
        }
        .navigationSplitViewStyle(FramedSplitStyle())
        .padding()
    }
}
Live preview
Sidebar Detail
Sidebar Detail
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →