NavigationSplitView hide sidebar toggle button

Question

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)
  }
}

4.3k

Posted by

Matteo

Reply

Add a Comment

Answer 1

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).

Posted by

CMDdev

Hi @CMDdev, thank you for your reply. Unfortunately this modifier doesn’t really solve the problem. It hides the whole navigation bar, not just the button.

—
Matteo

Add a Comment

Answer 2

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)
                }
            }
        }

Posted by

kay64

Add a Comment

Answer 3

.toolbar(removing: .sidebarToggle) ?

Posted by

WangZiYuan

Add a Comment

Answer 4

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+)

Posted by

Iomegan

Add a Comment

NavigationSplitView hide sidebar toggle button

Replies