This post is from the WWDC26 SwiftUI Q&A.
When I last tried configuring NavigationSplitView about a year ago, it was hard or impossible to configure background. Setting a custom or clear background was not supported, and NavigationSplitViewStyle seemingly did not support custom implementations.
Has this been improved?
The API you want in here is the container background passing the navigation placements. This is working well for me on 27.0. Are you seeing another behavior on 26.0?
import SwiftUI
@main struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
struct ContentView: View {
@State private var splitViewColor: Color = .teal
@State private var splitViewOpacity: Double = 1
@State private var sidebarColor: Color = .orange
@State private var sidebarOpacity: Double = 1
@State private var detailColor: Color = .indigo
@State private var detailOpacity: Double = 1
var body: some View {
NavigationSplitView {
List {
Section(".navigationSplitView") {
ColorPicker("Color", selection: $splitViewColor)
Slider(value: $splitViewOpacity) { Text("Opacity") }
}
Section("Sidebar .navigation") {
ColorPicker("Color", selection: $sidebarColor)
Slider(value: $sidebarOpacity) { Text("Opacity") }
}
Section("Detail .navigation") {
ColorPicker("Color", selection: $detailColor)
Slider(value: $detailOpacity) { Text("Opacity") }
}
}
.navigationTitle("Placements")
// Hide the list background so the navigation background shows through.
.scrollContentBackground(.hidden)
.containerBackground(
sidebarColor.opacity(sidebarOpacity),
for: .navigation
)
} detail: {
Text("Detail")
.navigationTitle("Detail")
.containerBackground(
detailColor.opacity(detailOpacity),
for: .navigation
)
.containerBackground(
splitViewColor.opacity(splitViewOpacity),
for: .navigationSplitView
)
}
}
}
#Preview {
ContentView()
}