Navigation Split View - 3 Columns

For some reason, using split view’s three column API doesn’t work as expected on iPhone (compact size) when using non-List views. There is a workaround. [2024.04]

/// This works
NavigationSplitView {
    sidebar
} content: {
    List(selection...) {
        ...
    }
} detail: {
    detail...
}

/// This doesn't
NavigationSplitView {
    sidebar
} content: {
    CustomView... (e.g. LazyVGrid)
} detail: {
    detail...
}

Turns out, you can just use NavigationLink and NavigationStack in a two-column setup, and still have it show in three columns in regular size. The system will collapse the views into a NavigationStack in compact size.

/// Workaround
NavigationSplitView {
    sidebar
} content: {
    NavigationStack {
        CustomNonListView... (e.g. LazyVGrid) {
            NavigationLink...
        }
    }
    .navigationDestination(...) {
        DetailView...
    }
} detail: {
    if selection == nil {
        ContentUnavailableView...
    }
}

For this to work, you still need to use the three-column API, otherwise the system will complain that there is no next column on which to present a detail view.