SwiftUI NavigationSplitView

by Annett Schwarze | 2025-02-28

NavigationSplitViews can be used with two or three column layout. Selections are managed with NavigationLink(value:,label:) and navigationDestination(for:,destination:). The call to navigationDestination has to be placed in a superview of the NavigationLinks. The destination views of the navigation destinations will be inserted in the next-level container. This may be content or detail.

Note that the content pane needs a navigation stack, as it uses navigation links and navigation destinations.

enum NavSplitCategory: String, Identifiable, Hashable, Comparable {
    case colors = "Colors"
    case values = "Values"
    case texts = "Texts"

    var id: String { return self.rawValue }

    static func < (lhs: NavSplitCategory, rhs: NavSplitCategory) -> Bool {
        return lhs.rawValue < rhs.rawValue
    }
}

struct XNavSplitView: View {
    ...
    @State var selectedCategory: String? = nil
    ...
    var body: some View {
        ZStack {
            NavigationSplitView(columnVisibility: $columnVisibility, sidebar: {
                Text("Sidebar").font(.largeTitle)
                let categories = data.keys.sorted() // = all NavSplitCategory items
                List(selection: $selectedCategory) {
                    ForEach(categories, id: \.self) { category in
                        NavigationLink(value: category, label: { Text("Category \(category.rawValue)") })
                    }
                }
                .navigationDestination(for: NavSplitCategory.self, destination: {
                    category in
                    switch category {
                    case .colors:
                    ...
                    }
                }
            }, content: {
                NavigationStack {
                    Text("Content").font(.largeTitle)
                }
                .navigationDestination(for: Color.self, destination: { color in
                    color
                })
                ...
            }, detail: {
                NavigationStack {
                    Text("Detail").font(.largeTitle)
                }
            })
            ...
        }
    }
}