Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide the navigation button when using NavigationSplitView?

Tags:

swift

swiftui

Now that the NavigationView was deprecated, I try to use the NavigationSplitView. But I can't hide the navigation toggle button, and also can't custom the title bar (I want to keep title and add filter button).

My app screenshot

I just want to realize like the Mail.app

Mail.app screenshot

Some other app screenshot

code snippet as bellow:

// ...
var body: some View {
    NavigationSplitView(columnVisibility: $columnVisibility) {
        DirectoryList(selection: $selectionDir)
    } content: {
        PaperList(selection: $selectionPaper)
            .navigationTitle(Text("Papers"))
            .toolbar {
                HStack {
                    Button {
                        // something todo
                    } label: {
                        Label("Experience", systemImage: "wand.and.stars")
                    }
                }
                .frame(maxWidth: .infinity, alignment: .trailing)
            }
    } detail: {
        Editor(selectionPaper?.name ?? "")
    }
}
// ...
like image 420
iFurySt Avatar asked Oct 19 '25 12:10

iFurySt


2 Answers

Use

NavigationSplitView {
    SidebarView()
        .toolbar(removing: .sidebarToggle)
} detail: {
    DetailView()
}
like image 167
Samuel De Backer Avatar answered Oct 21 '25 16:10

Samuel De Backer


You can use .navigationBarHidden(true) inside the content of the NavigationSplitView to hide the collapse button.

However, you will hide the toolbar too.

I think it's the only way to do it right now.

Edit: I found a way to do it.

You can use the introspect library like this:

NavigationSplitView(columnVisibility: $columnVisibility) {
    DirectoryList(selection: $selectionDir)
} content: {
    PaperList(selection: $selectionPaper)
        .navigationTitle(Text("Papers"))
        .toolbar {
            HStack {
                Button {
                    // something todo
            } label: {
                    Label("Experience", systemImage: "wand.and.stars")
                }
            }
            .frame(maxWidth: .infinity, alignment: .trailing)
        }
} detail: {
    Editor(selectionPaper?.name ?? "")
        .introspectSplitViewController { controller in         //New code
            controller.displayModeButtonVisibility = .never
        }
}

Edit 2: in iOS 17, this has changed. The new way to do it is:

NavigationSplitView(columnVisibility: $columnVisibility) {
    DirectoryList(selection: $selectionDir)
} content: {
    PaperList(selection: $selectionPaper)
        .navigationTitle(Text("Papers"))
        .toolbar {
            HStack {
                Button {
                    // something todo
            } label: {
                    Label("Experience", systemImage: "wand.and.stars")
                }
            }
            .frame(maxWidth: .infinity, alignment: .trailing)
        }
} detail: {
    Editor(selectionPaper?.name ?? "")
}
.introspect(.navigationSplitView, on: .iOS(.v16, .v17)) { splitViewController in
    DispatchQueue.main.async {
        splitViewController.displayModeButtonVisibility = .never
    }
}
like image 41
danifm1321 Avatar answered Oct 21 '25 14:10

danifm1321