I am in the process of migrating from NavigationView as a root to NavigationSplitView. My model supports various different objects, and what would fit into the content column varies from a list, to a TabView with a list within. This particular example (which I refer to from here on,) the lists hold two different objects within the model. The layout looked like this: NavigationView // Used for sidebar, would now be NavigationSplitView(sidebar:content:detail) - NavigationLink -> TabView -> List(objectA) -> Object-Specific DetailView -> List(objectB) -> Object-Specific DetailView - NavigationLink -> List(objectC) -> Object-Specific DetailView - and more like the above As it stood, there was no "third column" functionality, but with the new API I am seeking to achieve this. I am however, hung up on how to change the detail pane properly from within these sub-views. Am I needing to pass the various objects up to the struct housing the root NavigationSplitView? I don't currently use anything like Scene Storage, or other frameworks currently besides using CoreData with CloudKit. I know there's lots I need to be reading, is there somewhere I can go that really goes through UI Navigation and Elements? The end goal is a three-column application (including the sidebar as the first) that dynamically changes the content column from the definition of NavigationSplitView, but with a clear solution to changing the detail column to display different views that are specific to each object. Nesting a NavigationStack would come close if it could adjust the parent NavigationSplitView's detail column?

I'm playing around with the new navigation API's offered in ipadOS16/macOS13, but having some trouble working out how to combine NavigationSplitView, NavigationStack and NavigationLink together on macOS 13 (Testing on a Macbook Pro M1). The same code does work properly on ipadOS. I'm using a two-column NavigationSplitView. Within the 'detail' section I have a list of SampleModel1 instances wrapped in a NavigationStack. On the List I've applied navigationDestination's for both SampleModel1 and SampleModel2 instances. When I select a SampleModel1 instance from the list, I navigate to a detailed view that itself contains a list of SampleModel2 instances. My intention is to navigate further into the NavigationStack when clicking on one of the SampleModel2 instances but unfortunately this doesn't seem to work. The SampleModel2 instances are selectable but no navigation is happening. When I remove the NavigationSplitView completely, and only use the NavigationStack the problem does not arise, and i can successfully navigate to the SampleModel2 instances. Here's my sample code: // Sample model definitions used to trigger navigation with navigationDestination API. struct SampleModel1: Hashable, Identifiable { let id = UUID() static let samples = [SampleModel1(), SampleModel1(), SampleModel1()] } struct SampleModel2: Hashable, Identifiable { let id = UUID() static let samples = [SampleModel2(), SampleModel2(), SampleModel2()] } // The initial view loaded by the app. This will initialize the NavigationSplitView struct ContentView: View { enum NavItem { case first } var body: some View { NavigationSplitView { NavigationLink(value: NavItem.first) { Label("First", systemImage: "house") } } detail: { SampleListView() } } } // A list of SampleModel1 instances wrapped in a NavigationStack with multiple navigationDestinations struct SampleListView: View { @State var path = NavigationPath() @State var selection: SampleModel1.ID? = nil var body: some View { NavigationStack(path: $path) { List(SampleModel1.samples, selection: $selection) { model in NavigationLink("\(model.id)", value: model) } .navigationDestination(for: SampleModel1.self) { model in SampleDetailView(model: model) } .navigationDestination(for: SampleModel2.self) { model in Text("Model 2 ID \(model.id)") } } } } // A detailed view of a single SampleModel1 instance. This includes a list // of SampleModel2 instances that we would like to be able to navigate to struct SampleDetailView: View { var model: SampleModel1 var body: some View { Text("Model 1 ID \(model.id)") List (SampleModel2.samples) { model2 in NavigationLink("\(model2.id)", value: model2) } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } (NOTE: also created this issue on stackoverflow here) Also created a feedback assistant item: FB10876902

Hi, From what I saw, the NavigationStack allows for different types but replaces the view on top of the previous view. I want to use the sidebar in the NavigationSplitView in a similar way to the macOS "Systems Settings" app, basically more like a top-level menu leading to different views instead of the same content view. The only option I see is sticking with destination-based NavigationLinks which breaks all the advantages of switching to the new way. Does navigationDestination(for:destination:) work for NavigationSplitView? It would be so intuitive, especially with the NavigationSplitView defaulting to a Stack's behavior on smaller screens. If not, how can such a menu or multi-type list be achieved?

I got the error: A NavigationLink is presenting a value of type “FormTemplate” but there is no matching navigationDestination declaration visible from the location of the link. The link cannot be activated. This problem is only occurring on iPhone, on iPad works fine. I was following the documentation, and can't find the error. That's my base tabbar view: TabView { ForEach(menuData, id: \.title) { item in NavigationStack { item.view } .tabItem { Text(item.title) Image(systemName: item.icon) } .tag(item.title) } } The menu view: ScrollView { VStack (spacing: 12) { ForEach(lstMenu, id: \.title) { tV in NavigationLink(destination: tv.view, tag: tv.title, selection: $selection) { rowView } } } .navigationTitle("Segurança") .padding(.top, 20) .padding(.trailing, 20) .padding(.leading, 20) } .navigationTitle("Segurança") The list view: List { ForEach($viewModel. forms), id: \.documentId) { form in NavigationLink(value: form) { NameContentRow(entity: form) .frame(height: 75) .contentShape(Rectangle()) } } } .navigationDestination(for: FormTemplate.self) { form in EventFormResponseList(form: form) .vlPermissions(permissions) } .refreshable { fetch(onPullToRefresh: true) } .listStyle(.insetGrouped) .navigationBarTitleDisplayMode(.inline) .navigationBarTitle("Formulários de eventos") .padding(.horizontal, sizeClass == .compact ? 0 : 20) .padding(.top, sizeClass == .compact ? 0 : 16) .task { viewModel.loadFormTemplate(completion: { _ in }) }

Hi there, I'm struggling with the new NavigationSplitView. struct Team: Identifiable, Hashable {     let id = UUID()     var name: String     var players: [String] } struct SplitView3: View {     @State private var teams = [ Team(name: "Packers", players: ["Rodgers", "Alexander", "Dillon"]), Team(name: "Vikings", players: ["Ingram", "Cousins", "Berry"])     ]     @State private var selectedTeam: Team?     @State private var selectedPlayer: String?         var body: some View {             NavigationSplitView {                 List(teams, selection: $selectedTeam) { team in                     Text(team.name).tag(team).navigationTitle("Team")                 }.navigationBarHidden(true)                 .navigationSplitViewColumnWidth(250)             } content: {                 List(selectedTeam?.players ?? [], id: \.self, selection: $selectedPlayer) { player in                     Text(player).navigationTitle("Team Member")                 }             } detail: {                 Form{                     Text(selectedPlayer ?? "Choose a player.")                 }                 .navigationTitle("Player Detail").navigationBarTitleDisplayMode(.inline)             }             .navigationSplitViewStyle(.automatic)         } } When I run this in Simulator or Canvas I can navigate from Team (sidebar), trough Teammembers (content) to detail view and back to sidebar. But after I reach the sidebar again the links forward to content view don't work anymore. Did I miss something?

I’ve been trying really hard to get to try NavigationSplitView in my app, but I’m really confused as to how to use it when I’m not passing values in my app. I just have bindings. I really want to use the new features that come with the new API, but I just can’t figure out how. Attached is what I’m doing now, any help figuring out how to do this exact thing with the new NavigationSplitView API would be greatly appreciated. // ContentView     var body: some View {         NavigationView {             Sidebar() .navigationTitle("Formats")             Detail()         }     } // Sidebar @State private var isShowingDetail = true    var body: some View {         List {             NavigationLink(destination: Detail().navigationTitle(“Detail"), isActive: $isShowingMLAView) { Label(“Detail", systemImage: “ellipsis.circle")} // Other Navigation Links here...

I noticed a problem with the NavigationCookbook sample code. The builtInRecipes array containing Recipe models without IDs which means state restoration fails because the recipes have new unique IDs every time the app is launched (there is a let id = UUID() in Recipe). The problem is in NavigationCookbook/Models/DataModel private let builtInRecipes: [Recipe] = { var recipes = [ "Apple Pie": Recipe( name: "Apple Pie", category: .dessert, ingredients: applePie.ingredients), Should be let builtInRecipes: [Recipe] = { var recipes = [ "Apple Pie": Recipe( id: UUID(uuidString: "E35A5C9C-F1EA-4B3D-9980-E2240B363AC8")!, name: "Apple Pie", category: .dessert, ingredients: Ingredient.fromLines(applePie)), And the same thing for all the other built-in recipes in the array. The builtInRecipes containing ids can be found in the Code tab in the Developer app for this samples WWDC session video: https://developer.apple.com/wwdc22/10054 I also submitted this as feedback FB11744612

I have the following model in place for navigating to various pages: enum Destination: Hashable {   case today   case activity   case settings(path: SettingsPath? = nil)   case project(project: ProjectItem? = nil)      enum SettingsPath: Hashable {     case cycles     case donations   } } In an ObservableObject, I'm using @Published var sidebarDestination: Destination? = .today And then in various NavigationLink buttons, I'm using the following initializer -  NavigationLink(value: NavigationModel.Destination.activity... In the detail section of my NavigationSplitView I'm using a switch like so detail: {       if let destination = navigationModel.sidebarDestination {         switch destination {         case .today: TodayView()         case .project(let project):           // FIXME: Why is the detail view not updating?             if let selectedProject = project {               ProjectDetailView(project: selectedProject)             } else {               EmptyView()             } ... I've noticed that the pages with an enum case with an associated value are not updating correctly - the title on the page will update, but none of the other content. The pages with an enum case without an associated type seem to work just fine. All of this is using an iPad - the larger screen sizes Is this a bug?

I want to draw directions to a specific location in CarPlay. I realized that there are two different options that can be made regarding this. First of all, drawing a direct route from current location to the desired location. The second is to draw the route after showing our current location and selecting the location which we want to go on the map. Which would make more sense for me to do? Which authorization is appropriate for the situations I have mentioned? com.developer.apple.carplay-parking or com.developer.apple.carplay-maps? Parking or Map? If you developing an CarPlay Application I would appreciate it if you would also write about the resources you used on the subject. If you have knowledge about this subject, I am waiting for your answers ASAP! Thanks :)

This is related to nested NavigationLink's for the same view on Mac only. Example case is public: https://developer.apple.com/videos/play/wwdc2022/10054 But for Mac, related recipes do not respond to clicks. For example, click Dessert -> Apple Pie, showing the Apple Pie recipe. The related recipes display, but are not active / clickable: However as mentioned iOS works fine – the related recipes are clickable. Ideas for workarounds? Using the latest Ventura and Xcode 14.1 as of 9/16/22

The new NavigationSplitView is very handy. I want to use it for a settings screen, but I need a way to navigate in and out of it. Previously I just navigated in and out of my settings using a NavigationView. But if I change this to a NavigationStack, and then navigate forward into a NavigationSplitView from it, it almost works fine, but some weirdness happens: on iPhone there are two competing back arrows (i.e "<") and on an iPad there is weird spacing at the top of the screen. Should I be able to navigate from a NavigationStack into a NavigationSplit View? If so, are these known issues? If not, is there a recommended UI for navigating in and out of a NavigationSplitView from the rest of my iPhone/iPad app? thanks!

New NavigationSplitView is hard to use on watchOS. NavigationSplitView requires List to selection (for NavigationLink's init(_:value:)), but all selection methods are marked as unavailable on watchOS. (https://developer.apple.com/documentation/swiftui/navigationsplitview) (https://developer.apple.com/documentation/swiftui/list/init(_:selection:rowcontent:)-1q8lq) Well, It can be use old deprecated init(_:destination:) on NavigationLink... but It is weird. I filled feedback. (FB11403019)

Here is the implementation. import SwiftUI import PencilKit struct DrawingCanvas_bug: UIViewRepresentable { typealias UIViewType = PKCanvasView private let toolPicker = PKToolPicker() @Binding var drawing: PKDrawing var isOpaque: Bool = true var drawingDidChange: ((PKDrawing) -> Void)? func makeUIView(context: Context) -> PKCanvasView { let canvasView = PKCanvasView(frame: .zero) canvasView.drawing = drawing canvasView.delegate = context.coordinator canvasView.backgroundColor = .clear canvasView.isOpaque = isOpaque canvasView.alwaysBounceVertical = true // The size of the canvas is Zero, so I cannot update the ZoomScale now. // context.coordinator.updateZoomScale(for: canvasView) toolPicker.setVisible(true, forFirstResponder: canvasView) toolPicker.addObserver(canvasView) canvasView.becomeFirstResponder() return canvasView } func updateUIView(_ canvasView: PKCanvasView, context: Context) { DispatchQueue.main.async { // We can get the correct ZoomScale and the correct ContentSize, but part of the drawing is not visible. // Using the select tool can select them. context.coordinator.updateZoomScale(for: canvasView) } } func makeCoordinator() -> Coordinator { Coordinator(self) } static func dismantleUIView(_ canvasView: PKCanvasView, coordinator: Coordinator) { canvasView.resignFirstResponder() } } extension DrawingCanvas_bug { class Coordinator: NSObject, PKCanvasViewDelegate { var host: DrawingCanvas_bug init(_ host: DrawingCanvas_bug) { self.host = host } func canvasViewDrawingDidChange(_ canvasView: PKCanvasView) { host.drawing = canvasView.drawing if let action = host.drawingDidChange { action(canvasView.drawing) } updateContentSizeForDrawing(for: canvasView) } func updateZoomScale(for canvasView: PKCanvasView) { let canvasScale = canvasView.bounds.width / 768 canvasView.minimumZoomScale = canvasScale canvasView.maximumZoomScale = canvasScale canvasView.zoomScale = canvasScale updateContentSizeForDrawing(for: canvasView) } func updateContentSizeForDrawing(for canvasView: PKCanvasView) { let drawing = canvasView.drawing let contentHeight: CGFloat if !drawing.bounds.isNull { contentHeight = max(canvasView.bounds.height, (drawing.bounds.maxY + 500) * canvasView.zoomScale) } else { contentHeight = canvasView.bounds.height } canvasView.contentSize = CGSize(width: 768 * canvasView.zoomScale, height: contentHeight) } } } And here is how I use: NavigationSplitView(columnVisibility: .constant(.doubleColumn)) {     List(selection: $selection) {         ForEach(drawingModel.drawings, id: \.uuidString) {             DrawingRow(drawingData: $0)         }     } } detail: {     DrawingView() } .navigationSplitViewStyle(.balanced) // <- If I use automatic style, PKCanvasView's size is correct

Overview: When running the demo code presented in "The SwiftUI cookbook for navigation" (https://developer.apple.com/wwdc22/10054) I ran into some issues: Runtime warnings: 2022-06-08 22:20:31.587169+0800 NavigationSplitViewDemo[17797:672165] [SwiftUI] A NavigationLink is presenting a value of type “Category” but there is no matching navigation destination visible from the location of the link. The link cannot be activated. onChange(of: UpdateTrigger) action tried to update multiple times per frame. 2022-06-08 22:15:23.432289+0800 NavigationSplitViewDemo[17645:662571] [UIFocus] _TtGC7SwiftUI14_UIHostingViewGVS_15ModifiedContentVS_7AnyViewVS_12RootModifier__ implements focusItemsInRect: - caching for linear focus movement is limited as long as this view is on screen. Feedback filed: FB10103041 and FB10104196

anyone been able to get rid of this error? A navigationDestination for <App.Entity> was declared earlier on the stack. Only the destination declared closest to the root view of the stack will be used. Seems to happen when im using a NavigationLink(value:) and a NavigationLink(destination:) in the same class. I'd think it would make sense to be able to use both methods? ios16 b5

I have a very simple NavigationSplitView setup. The first time you press the NavigationLink it pushes the next view, but then immediately dismisses it. Tap it again and it correctly pushes and stays on screen. Then when tapping the second NavigationLink it pushes a view but just shows a yellow warning triangle and not the text. Then when pressing the back button, it shows the initial view first, then the second view 🤷‍♂️ This is on iOS 16 beta 4. Any idea what is going on here? struct ContentView: View {     @State var splitViewVisibility: NavigationSplitViewVisibility = .all     var body: some View {         NavigationSplitView(columnVisibility: $splitViewVisibility) {             List {                 NavigationLink("First", destination: DetailView(string: "First"))             }         } detail: {             Text("Select the first view from the list")         }         .navigationSplitViewStyle(.balanced)     } } struct DetailView: View {     var string: String     var body: some View {         NavigationStack() {             List {                 NavigationLink("Second", value: "Second")             }             .navigationDestination(for: String.self, destination: { string in                 Text(string)             })         }         .navigationTitle(string)     } }

I have a project where I am upgrading my Apple Watch app to use SwiftUi and the SwiftUI lifecycle. For some reason, my destination views are missing the back button (<) and the navigation title. It all works fine with NavigationView, but I definitely want to go to NavigationStack and use the new API.

Hey there, I was trying to get an overview of the new navigation in the Xcode-14 Beta. I watched the WWDC22 session The SwiftUI Cookbook for Navigation and downloaded the associated sample code https://developer.apple.com/documentation/swiftui/bringing_robust_navigation_structure_to_your_swiftui_app. When trying it out, I noticed that the two-column mode of the NavigationSplitView in portrait mode does not work properly on iOS. In the download version of NavigationCookbook, a click on one of the "related recipes" in the recipe detail view does not lead to the detail view of the corresponding recipe (portrait format only on iOS), but to the detail of the NavigationSplitView. The only solution I found was to include a NavigationStack in .navigationDestation. Is there a more sophisticated solution other than using @Environment(\.horizontalSizeClass) private var horizontalSizeClass to avoid the problem.

It looks like passing a binding (instead of value) to a detail view is not possible with NavigationSplitView. For example, how to adopt NavigationSplitView in sample app Date Planner — Sample Apps Tutorials | Apple Developer Documentation does not seem straight forward. The only way seems to be to use ObservableObjects and use separate update methods on data. ...     ForEach(eventData.sortedEvents(period: period)) { $event in         NavigationLink {             EventEditor(event: $event)         } label: {             EventRow(event: event)         }

Is there any convenient way to back deploy the NavigationStack or NavigationSplitView?? The real problem is if I want to back support iOS 15 or 14, I must conditionally switch between NavigationView and NavigationStack / NavigationSplitView. Here is how I did for NavigationStack, but I have no idea how to deal with NavigationSplitView import SwiftUI struct NavigationStack<Content: View>: View {     var content: () -> Content     var body: some View {         if #available(iOS 16.0, macOS 13.0, *) {             SwiftUI.NavigationStack {                 content()             }         } else {             NavigationView {                 content()             }.navigationViewStyle(.stack)         }     } } Will the new NavigationStack and NavigationSplitView back support old devices? I think these behaviors in previous OS is not new features.