SOLVED: NavigationLink on detail NavigationSplitView breaks navigation stack hierarchy

@arroyot24

Sep '23

For my Mac and iPad targets, I use on my app a NavigationSplitView with standard structure:

NavigationSplitView {
 FirstView()
 } content: {
SecondView()
 } detail: {
 ThirdView()
 }

In fact, thirdView (Detail view) only appears on this hierarchy at first launch, as it is really called from the SecondView, which contains a list of items:

struct SecondView: View {
  var body: some View {
    List(myData, id: \.id) { item in
      NavigationLink(destination: ThirdView(item: itemType)) {
                ItemCellView(item: itemCellType)

And finally, ThirdView itself containing its own NavigationLinks:

struct StudentDetailView: View {
  var body: some View {
    NavigationLink(destination: EvenMoreDetailedView(item: itemType)) {
       Label("More details", systemImage: "info")
        }

The problem is that, this way, although all navigation works perfectly from MainView to DetailView, when tapping on "More detail", EvenMoreDetailedView appears in its place (third pannel), but without any "back" button or so, which I understand is due to any kind of inconsistency on navigation stack.

I have tried even adding this "back" button myself, but I don't know what code to add on the button to go back on navigation stack. I suposse, anyway there must be a better way...

Any ideas about how to workaround with this? Thanks!

@arroyot24

Sep '23

I myself have found the solution on Apple Official Documentation. On NavigationSplitView section, they say:

You can also embed a NavigationStack in a column. Tapping or clicking a NavigationLink that appears in an earlier column sets the view that the stack displays over its root view. Activating a link in the same column adds a view to the stack. Either way, the link must present a data type for which the stack has a corresponding navigationDestination(for:destination:) modifier.

So I embedded in a NavigationStack my DetailView. Now it works with no more code:

NavigationSplitView {
 FirstView()
 } content: {
SecondView()
 } detail: {
NavigationStack {
 ThirdView()
  }
}

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.