Hiding the NavigationSplitView's sidebar border.

I'm trying to build a custom designed sidebar for iPad that requires there to be no gray divider to separated the navigation and the detail view.

I'm surprised at how unsuccessful I have been given how simple this is but have still found no luck.

My current code:

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            VStack {
                //code...
            }
            .background(.white)
            .navigationSplitViewColumnWidth(70)
            .navigationBarHidden(true)
            .edgesIgnoringSafeArea(.vertical)
        } detail: {
            //code...
        }
    }
}

I've attempted to add an overlay of a white rectangle to cover the divider but it just goes behind the existing border. I like to think there is a simpler solution anyways.

Answered by Technology Evangelist in 801346022

Check out ContainerBackgroundPlacement. In particular, try something like:

NavigationSplitView {
    // … sidebar …
    .containerBackground(.thinMaterial, for: .navigation)
    .containerBackground(Color.green, for: .navigationSplitView)
} detail: {
    // … detail …
    .containerBackground(.thickMaterial, for: .navigation)
}
Accepted Answer

Check out ContainerBackgroundPlacement. In particular, try something like:

NavigationSplitView {
    // … sidebar …
    .containerBackground(.thinMaterial, for: .navigation)
    .containerBackground(Color.green, for: .navigationSplitView)
} detail: {
    // … detail …
    .containerBackground(.thickMaterial, for: .navigation)
}
Hiding the NavigationSplitView's sidebar border.
 
 
Q