NavigationSplitView macOS

Question

Created 2d

Replies 2

Boosts 0

Participants 2

I want to create SplitView App for macOS like Apple Mail. Is it possible using swiftUI NavigationSplitView or should I use AppKit to achieve it.

I want exact toolbar buttons also. Filter button will be in Invoice list pane and other buttons in the details pane.

Also, I want details pane completely collapsable(just like in Mail app).

Screenshot 2026-03-16 at 4.14.25 PM.png

Answered by DTS Engineer in 880119022

While we can't share exactly how this was done in the Mail app, I was able to achieve a similar layout with the following code:

Screenshot 2026-03-16 at 9.04.14 AM.png

NavigationSplitView {
// ...
} content: {
    VStack {
        HStack{
            sampleButton
            sampleButton
        }
        .cornerRadius(12)
        .padding(.top)

        List() {
            ForEach(0..<10) { index in
                Text("Email \(index)")
            }
        }
    }
} detail: {
    ContentUnavailableView("Select an email", systemImage: "envelope")
        .toolbar {
            sampleButton
        }
}

To make certain columns collapsable, see NavigationSplitViewVisibility. This would require adding a @State to manage column visibility.

Feel free to change it to your liking.

 Travis

Boost

Answer 1

DTS Engineer OP

Apple

2d

Accepted Answer

While we can't share exactly how this was done in the Mail app, I was able to achieve a similar layout with the following code:

Screenshot 2026-03-16 at 9.04.14 AM.png

NavigationSplitView {
// ...
} content: {
    VStack {
        HStack{
            sampleButton
            sampleButton
        }
        .cornerRadius(12)
        .padding(.top)

        List() {
            ForEach(0..<10) { index in
                Text("Email \(index)")
            }
        }
    }
} detail: {
    ContentUnavailableView("Select an email", systemImage: "envelope")
        .toolbar {
            sampleButton
        }
}

To make certain columns collapsable, see NavigationSplitViewVisibility. This would require adding a @State to manage column visibility.

Feel free to change it to your liking.

 Travis

0

Answer 2

bchandresh OP

1d

How do I get filter toolbar button near the divider like in mail app using swiftUI.

0