On macOS, what is the appropriate way to disable the sidebar material in a NavigationSplitView?

Question

Created 1w

Replies 4

Boosts 0

Participants 3

If you create a NavigationSplitView, then the sidebar is automatically adorned with a sidebar material effect. This affects the views background as well as any controls that are in the view.

What is the correct way to disable this behaviour so that I can use a NavigationSplitView without the material effects being applied?

The best I've come up with so far is to explicitly set the background on the sidebar but I'm curious if that's the correct way or I'm just getting lucky.

struct ContentView: View {
  var body: some View {
    NavigationSplitView {
      // This works, but is it correct?
      SidebarView()
        .background(.windowBackground)
    } detail: {
      DetailView()
    }
  }
}

Boost

Answer 1

szymczyk OP

1w

If your sidebar has a list, you can use the .listStyle modifier to give the list a diffferent style than the sidebar style, which is the default for a navigation split view on Mac. The following modifier creates a plain list style:

.listStyle(.plain)

If your sidebar doesn't have a list, show the code for it so people can provide an alternative to the .background modifier you used in your example.

0

Answer 2

kennyc OP

1w

@szymczyk The contents of my SidebarView is a custom tab view where each tab hosts views containing different content.

Refer to the sidebar or inspector panels in Xcode for a good idea. In Xcode's case, they allow vibrancy in the sidebar even for the panels that are not lists. In the Inspector, there is no vibrancy.

We're hoping to disable the vibrancy in the sidebar so that it matches the look-and-feel of the inspector panel.

0

Answer 3

DTS Engineer OP

Apple

1w

Could you try setting .scrollContentBackground(.hidden) on the List in the Sidebar . That should hide the standard system background of the List.

I'll prefix this by saying you should remove the TabView as the content of your Sidebar. TabViews are also sidebar adaptable and adapts to each platform. The Sidebars section on the HIG contains information on best practices.

0

Answer 4

kennyc OP

1w

@DTS Engineer Unfortunately, .scrollContentBackground doesn't seem to have any affect regardless of where I place it. We don't actually use a List in our Sidebar but I tried this in a demo app and wasn't able to make it work.

In our SidebarView, we use a ScrollView as the top-element, then a VStack, followed by a bunch of text fields and other standard controls.

What's interesting (and desirable) with the .background(.windowColor) implementation is that it disables vibrancy for all these controls, which is actually what we want. (We're trying to avoid vibrant textfields in the sidebar with non-vibrant textfields in the inspector.)

As for the "custom tab view" I alluded to, it's not a SwiftUI TabView but rather just a custom View that conditionally shows a child view. We wanted to use TabView but we couldn't figure out how to hide the native tab bar, which is possible in AppKit. (NSTabViewController.TabStyle.unspecified)

0