NavigationSplitView hide sidebar toggle button

Question

Created Apr ’23

Replies 5

Boosts 3

Views 5.8k

Participants 6

I'm trying to implement the same UI used by the Settings app on iPad: a split view with two columns that are visible at all times.

This code produces the layout i want, but I would like to hide the "toggle sidebar visibility" button that the system introduces.

Is there a SwiftUI API I can use to hide this button? Maybe an alternate way to setup views that tells the system that the button is not necessary?

struct SomeView: View {
  var body: some View {
    NavigationSplitView(
      columnVisibility: .constant(.all),
      sidebar: { Text("sidebar") },
      detail: { Text("detail") }
    )
    .navigationSplitViewStyle(.balanced)
  }
}

Boost

Answer 1

CMDdev OP

Apr ’23

You can use the toolbar(_:for:) modifier on your sidebar view like this: .toolbar(.hidden, for: .navigationBar). You can find details in the documentation here.

Here's the resulting view:

struct SomeView: View {
  var body: some View {
    NavigationSplitView(
      columnVisibility: .constant(.all),
      sidebar: { 
          Text("sidebar")
               .toolbar(.hidden, for: .navigationBar)
      },
      detail: { Text("detail") }
    )
    .navigationSplitViewStyle(.balanced)
  }
}

The first argument sets the visibility, and the second arguments specifies which bar to hide (which in your case is .navigationBar).

0

Answer 2

kay64 OP

Aug ’23

I'm a newbie in SwiftUI development, but I had the same question for my macOS application.

The answer I've found seems a little bit ugly, but using SwiftUI-Introspect library you can just remove corresponding toolbar item. Maybe it will be helpful for someone.

        .introspect(.window, on: .macOS(.v10_15, .v11, .v12, .v13, .v14)) { nsWindow in
            if let toolbar = nsWindow.toolbar {
                if let index = toolbar.items.firstIndex(where: { $0.itemIdentifier.rawValue == "com.apple.SwiftUI.navigationSplitView.toggleSidebar" }) {
                    toolbar.removeItem(at: index)
                }
            }
        }

0

Answer 3

WangZiYuan OP

Oct ’23

.toolbar(removing: .sidebarToggle) ?

0

Answer 4

Iomegan OP

Nov ’23

Quoting Apple: "On some platforms, NavigationSplitView adds a sidebarToggle toolbar item. Use the toolbar(removing:) modifier to remove the default item."

More on that her: https://developer.apple.com/documentation/swiftui/view/toolbar(removing:)

(Requires iOS 17.0+ / macOS 14.0+)

0

Answer 5

travisbikkle OP

3w

Although Apple introduced .toolbar(removing: .sidebarToggle) finally, users can still drag the divider to change the column width and hide the side bar on macOS, and since sidebar toggle button is removed, users could never get back. In Sonoma Xcode15, developers have to use something like this:

        .introspect(.navigationSplitView, on: .macOS(.v13,.v14,.v15)) { splitview in
            if let delegate = splitview.delegate as? NSSplitViewController {
                delegate.splitViewItems.first?.canCollapse = false
            }
        }

But it fails to work on Sequoia with Xcode16. Developers have to search around again to make it work just like the built-in Settings App, it's a shame.

0