NavigationSplitView No Toggle Button

I went back to square one since the NavigationLink isActive is deprecated, this is when I found out about NavigationSplitView which removes the hassle of creating a 2 column app.

However, I can never figure out why the toggle button does not show. I copied this sample code (already tried 2 tutorials, copy pasted them but still no toggle button)

Anyone know why?

import SwiftUI

enum DemoScreen: String, Codable {
  case first, second, third

  var title: String {
    rawValue.capitalized
  }
}

struct ContentView: View {

  @State
  private var selection: DemoScreen? = .first

  var body: some View {
    NavigationSplitView {
      sidebarContent
    } detail: {
      detailContent
    }
  }
}

extension ContentView {

  var sidebarContent: some View {
    List {
      link(to: .first)
      link(to: .second)
      link(to: .third)
    }
  }

  func link(to page: DemoScreen) -> some View {
    NavigationLink(value: page) {
      Text(page.title)
    }
  }
}

extension ContentView {

  @ViewBuilder
  var detailContent: some View {
    if let selection = selection {
      detailContent(for: selection)
        .buttonStyle(.bordered)
    } else {
      Text("No selection")
    }
  }

  @ViewBuilder
  func detailContent(for screen: DemoScreen) -> some View {
    switch screen {
    case .first: Button("First button") {}
    case .second: Button("Second button") {}
    case .third: Button("Second button") {}
    }
  }
}

Why is there no toggle button above? And why is the menu always showing? I cant see the detiail view anymore

Answered by BabyJ in 735187022

Why is there no toggle button above?

What do you mean by "toggle button"?

Do you mean the button that hides and shows the sidebar? This is only present when the horizontalSizeClass is .regular. On an iPhone in portrait mode, it won't appear.


 And why is the menu always showing?

What "menu" are you talking about?


I cant see the detiail view anymore

If you want to see the detail view, you need to select an item from the list. As I said before, the two-column layout with the sidebar toggle button is only present when the horizontalSizeClass is .regular. In your screenshot (an iPhone in portrait mode) the NavigationSplitView collapses down to a single column layout and acts more like a NavigationStack.

Accepted Answer

Why is there no toggle button above?

What do you mean by "toggle button"?

Do you mean the button that hides and shows the sidebar? This is only present when the horizontalSizeClass is .regular. On an iPhone in portrait mode, it won't appear.


 And why is the menu always showing?

What "menu" are you talking about?


I cant see the detiail view anymore

If you want to see the detail view, you need to select an item from the list. As I said before, the two-column layout with the sidebar toggle button is only present when the horizontalSizeClass is .regular. In your screenshot (an iPhone in portrait mode) the NavigationSplitView collapses down to a single column layout and acts more like a NavigationStack.

NavigationSplitView No Toggle Button
 
 
Q