Set NavigationLink default selected

Question

Created Feb ’24

Replies 1

Boosts 1

Views 1.3k

Participants 1

Hello fellow developers,

I'm working with a NavigationSplitView in my SwiftUI application and encountering a challenge. In my app, a specific destination view (WalkView) is loaded by default at startup. I would like to have the corresponding NavigationLink in my NavigationSplitView appear as selected or active to reflect this (with the accentColor).

Is there a way to programmatically set a NavigationLink as selected by default within a NavigationSplitView when the app launches?

I found the isActive, but that one is deprecated. https://developer.apple.com/documentation/swiftui/navigationlink/init(_:destination:isactive:)-3v44

Any insights or guidance on achieving this behavior would be greatly appreciated.

NavigationSplitView {
    List {
      NavigationLink(
        destination: WalkView()
      ) {
        Label("Walk", systemImage: "figure.walk")
      }
      
      NavigationLink(
        destination: SoccerView()
      ) {
        Label("Soccer", systemImage: "figure.soccer")
      }
    }
} detail: {
  // start-up view
  WalkView()
}
.edgesIgnoringSafeArea(.top)
.accentColor(Color.blue) // my accent color, I want Walk to be blue at start-up

Boost

Answer 1

curry1337 OP

Feb ’24

I've successfully resolved the issue by making the following changes: I removed the destination, assigned a specific value to each NavigationLink, included a "selectedItem" variable in the list, and then verified the selected value in the detail view.

I hope it helps someone!

struct ContentView: View {
  @State private var selectedItem: String? = "Walk"
  
  var body: some View {
    NavigationSplitView {
      List(selection: $selectedItem) {
        NavigationLink(value: "Walk") {
          Label("Walk", systemImage: "figure.walk")
        }
        NavigationLink(value: "Soccer") {
          Label("Soccer", systemImage: "figure.soccer")
        }
      }
      .listStyle(.sidebar)
    } detail: {
      switch selectedItem {
        case "Walk":
          WalkView()
        case "Soccer":
          SoccerView()
        default:
          Text("Select an item")
      }
    }
    .accentColor(Color.blue)
  }
}

struct WalkView: View {
  var body: some View {
    Text("Walking is nice!")
  }
}

struct SoccerView: View {
  var body: some View {
    Text("Playing soccer is nice!")
  }
}

// Preview
struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

2