NavigationSplitView as sheet content is missing NavigationBars on macOS

Question

I need to display a "Search and add item to list" workflow in a SwiftUI Mac App that requires comparing lots of details. Therefore I want to show a NavigationSplitView with search results and detail view in a sheet (to make the workflow modal).

However the NavigationSplitView is missing its children's navigation bars and bar items.

Here is a really simple sample app demonstrating the problem. It should display a navigationTitle but doesn't:

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
        .frame(width:800, height:800)
        .sheet(isPresented: .constant(true), content: {
            NavigationSplitView {
                List {
                    Text("Item")
                }
                .navigationTitle("Title")
            } detail: {
                Text("Detail")
            }
            .frame(width:600, height:400)
        })
    }
}

How to fix/work around this?

I got no answer on the apple dev forums, sorry for double-posting.

Answer 1

Showing a sheet can be tricky. If you want to show a navigation title, the sheet must have NavigationStack of its own. The following is an example.

import SwiftUI

struct ContentView: View {
    @State private var showSheet = false
    
    var body: some View {
        VStack {
            Button("Show sheet") {
                showSheet.toggle()
            }
        }
        .padding()
        .frame(width:800, height:800)
        .sheet(isPresented: $showSheet, content: {
            NavigationStack {
                NavigationSplitView {
                    VStack {
                        Spacer()
                            .frame(height: 32)
                        List {
                            Text("Item")
                            Text("Item")
                            Text("Item")
                            Text("Item")
                            Text("Item")
                        }
                        Button("Close") {
                            showSheet.toggle()
                        }
                    }
                    
                } detail: {
                    Text("Detail")
                }
                .navigationTitle("Title")
                .frame(width:420, height:320)
            }
        })
        .frame(width: 480.0, height: 360.0)
    }
}

As shown in the picture below, if I click on the push button...

a sheet will appear as follows.