1# iOS Navigation Patterns
2 
3## NavigationStack (iOS 16+)
4 
5### Basic Navigation
6 
7```swift
8struct BasicNavigationView: View {
9    var body: some View {
10        NavigationStack {
11            List(items) { item in
12                NavigationLink(item.title, value: item)
13            }
14            .navigationTitle("Items")
15            .navigationDestination(for: Item.self) { item in
16                ItemDetailView(item: item)
17            }
18        }
19    }
20}
21```
22 
23### Programmatic Navigation
24 
25```swift
26struct ProgrammaticNavigationView: View {
27    @State private var path = NavigationPath()
28 
29    var body: some View {
30        NavigationStack(path: $path) {
31            VStack(spacing: 20) {
32                Button("Go to Settings") {
33                    path.append(Destination.settings)
34                }
35 
36                Button("Go to Profile") {
37                    path.append(Destination.profile)
38                }
39 
40                Button("Deep Link to Item 123") {
41                    path.append(Destination.settings)
42                    path.append(Destination.itemDetail(id: 123))
43                }
44            }
45            .navigationTitle("Home")
46            .navigationDestination(for: Destination.self) { destination in
47                switch destination {
48                case .settings:
49                    SettingsView()
50                case .profile:
51                    ProfileView()
52                case .itemDetail(let id):
53                    ItemDetailView(itemId: id)
54                }
55            }
56        }
57    }
58 
59    enum Destination: Hashable {
60        case settings
61        case profile
62        case itemDetail(id: Int)
63    }
64}
65```
66 
67### Navigation State Persistence
68 
69```swift
70struct PersistentNavigationView: View {
71    @SceneStorage("navigationPath") private var pathData: Data?
72    @State private var path = NavigationPath()
73 
74    var body: some View {
75        NavigationStack(path: $path) {
76            ContentView()
77                .navigationDestination(for: Item.self) { item in
78                    ItemDetailView(item: item)
79                }
80        }
81        .onAppear {
82            restorePath()
83        }
84        .onChange(of: path) { _, newPath in
85            savePath(newPath)
86        }
87    }
88 
89    private func savePath(_ path: NavigationPath) {
90        guard let representation = path.codable else { return }
91        pathData = try? JSONEncoder().encode(representation)
92    }
93 
94    private func restorePath() {
95        guard let data = pathData,
96              let representation = try? JSONDecoder().decode(
97                NavigationPath.CodableRepresentation.self,
98                from: data
99              ) else { return }
100        path = NavigationPath(representation)
101    }
102}
103```
104 
105## NavigationSplitView
106 
107### Two-Column Layout
108 
109```swift
110struct TwoColumnView: View {
111    @State private var selectedCategory: Category?
112    @State private var columnVisibility: NavigationSplitViewVisibility = .all
113 
114    var body: some View {
115        NavigationSplitView(columnVisibility: $columnVisibility) {
116            // Sidebar
117            List(categories, selection: $selectedCategory) { category in
118                NavigationLink(value: category) {
119                    Label(category.name, systemImage: category.icon)
120                }
121            }
122            .navigationTitle("Categories")
123        } detail: {
124            // Detail
125            if let category = selectedCategory {
126                CategoryDetailView(category: category)
127            } else {
128                ContentUnavailableView(
129                    "Select a Category",
130                    systemImage: "sidebar.leading"
131                )
132            }
133        }
134        .navigationSplitViewStyle(.balanced)
135    }
136}
137```
138 
139### Three-Column Layout
140 
141```swift
142struct ThreeColumnView: View {
143    @State private var selectedFolder: Folder?
144    @State private var selectedDocument: Document?
145 
146    var body: some View {
147        NavigationSplitView {
148            // Sidebar
149            List(folders, selection: $selectedFolder) { folder in
150                NavigationLink(value: folder) {
151                    Label(folder.name, systemImage: "folder")
152                }
153            }
154            .navigationTitle("Folders")
155        } content: {
156            // Content column
157            if let folder = selectedFolder {
158                List(folder.documents, selection: $selectedDocument) { document in
159                    NavigationLink(value: document) {
160                        DocumentRow(document: document)
161                    }
162                }
163                .navigationTitle(folder.name)
164            } else {
165                Text("Select a folder")
166            }
167        } detail: {
168            // Detail column
169            if let document = selectedDocument {
170                DocumentDetailView(document: document)
171            } else {
172                ContentUnavailableView(
173                    "Select a Document",
174                    systemImage: "doc"
175                )
176            }
177        }
178    }
179}
180```
181 
182## Sheet Navigation
183 
184### Modal Sheets
185 
186```swift
187struct SheetNavigationView: View {
188    @State private var showSettings = false
189    @State private var showNewItem = false
190    @State private var editingItem: Item?
191 
192    var body: some View {
193        NavigationStack {
194            ContentView()
195                .toolbar {
196                    ToolbarItem(placement: .primaryAction) {
197                        Button("Add", systemImage: "plus") {
198                            showNewItem = true
199                        }
200                    }
201                    ToolbarItem(placement: .topBarLeading) {
202                        Button("Settings", systemImage: "gear") {
203                            showSettings = true
204                        }
205                    }
206                }
207        }
208        // Boolean-based sheet
209        .sheet(isPresented: $showSettings) {
210            SettingsSheet()
211        }
212        // Boolean-based fullscreen cover
213        .fullScreenCover(isPresented: $showNewItem) {
214            NewItemView()
215        }
216        // Item-based sheet
217        .sheet(item: $editingItem) { item in
218            EditItemSheet(item: item)
219        }
220    }
221}
222```
223 
224### Sheet with Navigation
225 
226```swift
227struct NavigableSheet: View {
228    @Environment(\.dismiss) private var dismiss
229 
230    var body: some View {
231        NavigationStack {
232            Form {
233                Section("General") {
234                    NavigationLink("Account") {
235                        AccountSettingsView()
236                    }
237                    NavigationLink("Notifications") {
238                        NotificationSettingsView()
239                    }
240                }
241 
242                Section("Advanced") {
243                    NavigationLink("Privacy") {
244                        PrivacySettingsView()
245                    }
246                }
247            }
248            .navigationTitle("Settings")
249            .toolbar {
250                ToolbarItem(placement: .confirmationAction) {
251                    Button("Done") {
252                        dismiss()
253                    }
254                }
255            }
256        }
257    }
258}
259```
260 
261### Sheet Customization
262 
263```swift
264struct CustomSheetView: View {
265    @State private var showSheet = false
266 
267    var body: some View {
268        Button("Show Sheet") {
269            showSheet = true
270        }
271        .sheet(isPresented: $showSheet) {
272            SheetContent()
273                // Available detents
274                .presentationDetents([
275                    .medium,
276                    .large,
277                    .height(200),
278                    .fraction(0.75)
279                ])
280                // Selected detent binding
281                .presentationDetents([.medium, .large], selection: $selectedDetent)
282                // Drag indicator visibility
283                .presentationDragIndicator(.visible)
284                // Corner radius
285                .presentationCornerRadius(24)
286                // Background interaction
287                .presentationBackgroundInteraction(.enabled(upThrough: .medium))
288                // Prevent interactive dismiss
289                .interactiveDismissDisabled(hasUnsavedChanges)
290        }
291    }
292}
293```
294 
295## Tab Navigation
296 
297### Basic TabView (iOS 18+)
298 
299```swift
300struct MainTabView: View {
301    @State private var selectedTab = 0
302 
303    var body: some View {
304        TabView(selection: $selectedTab) {
305            Tab("Home", systemImage: "house", value: 0) {
306                HomeView()
307            }
308 
309            Tab("Search", systemImage: "magnifyingglass", value: 1) {
310                SearchView()
311            }
312 
313            Tab("Profile", systemImage: "person", value: 2) {
314                ProfileView()
315            }
316            .badge(unreadCount)
317        }
318    }
319}
320```
321 
322### Tab with Custom Badge (iOS 18+)
323 
324```swift
325struct BadgedTabView: View {
326    @State private var selectedTab: AppTab = .home
327    @State private var cartCount = 3
328 
329    enum AppTab: String, CaseIterable {
330        case home, search, cart, profile
331 
332        var icon: String {
333            switch self {
334            case .home: return "house"
335            case .search: return "magnifyingglass"
336            case .cart: return "cart"
337            case .profile: return "person"
338            }
339        }
340    }
341 
342    var body: some View {
343        TabView(selection: $selectedTab) {
344            ForEach(AppTab.allCases, id: \.self) { tab in
345                Tab(tab.rawValue.capitalized, systemImage: tab.icon, value: tab) {
346                    NavigationStack {
347                        contentView(for: tab)
348                    }
349                }
350                .badge(tab == .cart ? cartCount : 0)
351            }
352        }
353    }
354}
355```
356 
357## Deep Linking
358 
359### URL-Based Navigation
360 
361```swift
362struct DeepLinkableApp: App {
363    @StateObject private var router = NavigationRouter()
364 
365    var body: some Scene {
366        WindowGroup {
367            ContentView()
368                .environmentObject(router)
369                .onOpenURL { url in
370                    router.handle(url: url)
371                }
372        }
373    }
374}
375 
376class NavigationRouter: ObservableObject {
377    @Published var path = NavigationPath()
378    @Published var selectedTab: Tab = .home
379 
380    func handle(url: URL) {
381        guard url.scheme == "myapp" else { return }
382 
383        switch url.host {
384        case "item":
385            if let id = Int(url.lastPathComponent) {
386                selectedTab = .home
387                path = NavigationPath()
388                path.append(Destination.itemDetail(id: id))
389            }
390        case "settings":
391            selectedTab = .profile
392            path = NavigationPath()
393            path.append(Destination.settings)
394        default:
395            break
396        }
397    }
398}
399```
400 
401### Universal Links
402 
403```swift
404struct UniversalLinkHandler: View {
405    @EnvironmentObject private var router: NavigationRouter
406 
407    var body: some View {
408        ContentView()
409            .onContinueUserActivity(NSUserActivityTypeBrowsingWeb) { activity in
410                guard let url = activity.webpageURL else { return }
411                handleUniversalLink(url)
412            }
413    }
414 
415    private func handleUniversalLink(_ url: URL) {
416        // Parse URL path and navigate accordingly
417        let pathComponents = url.pathComponents
418 
419        if pathComponents.contains("product"),
420           let idString = pathComponents.last,
421           let id = Int(idString) {
422            router.navigate(to: .product(id: id))
423        }
424    }
425}
426```
427 
428## Navigation Coordinator Pattern
429 
430```swift
431@MainActor
432class NavigationCoordinator: ObservableObject {
433    @Published var path = NavigationPath()
434    @Published var sheet: Sheet?
435    @Published var fullScreenCover: FullScreenCover?
436 
437    enum Sheet: Identifiable {
438        case settings
439        case newItem
440        case editItem(Item)
441 
442        var id: String {
443            switch self {
444            case .settings: return "settings"
445            case .newItem: return "newItem"
446            case .editItem(let item): return "editItem-\(item.id)"
447            }
448        }
449    }
450 
451    enum FullScreenCover: Identifiable {
452        case onboarding
453        case camera
454 
455        var id: String {
456            switch self {
457            case .onboarding: return "onboarding"
458            case .camera: return "camera"
459            }
460        }
461    }
462 
463    func push(_ destination: Destination) {
464        path.append(destination)
465    }
466 
467    func pop() {
468        guard !path.isEmpty else { return }
469        path.removeLast()
470    }
471 
472    func popToRoot() {
473        path = NavigationPath()
474    }
475 
476    func present(_ sheet: Sheet) {
477        self.sheet = sheet
478    }
479 
480    func presentFullScreen(_ cover: FullScreenCover) {
481        self.fullScreenCover = cover
482    }
483 
484    func dismiss() {
485        if fullScreenCover != nil {
486            fullScreenCover = nil
487        } else if sheet != nil {
488            sheet = nil
489        }
490    }
491}
492```
493 
494## Navigation Transitions (iOS 18+)
495 
496### Custom Navigation Transitions
497 
498```swift
499struct CustomTransitionView: View {
500    @Namespace private var namespace
501 
502    var body: some View {
503        NavigationStack {
504            List(items) { item in
505                NavigationLink(value: item) {
506                    ItemRow(item: item)
507                        .matchedTransitionSource(id: item.id, in: namespace)
508                }
509            }
510            .navigationDestination(for: Item.self) { item in
511                ItemDetailView(item: item)
512                    .navigationTransition(.zoom(sourceID: item.id, in: namespace))
513            }
514        }
515    }
516}
517```
518 
519### Hero Transitions
520 
521```swift
522struct HeroTransitionView: View {
523    @Namespace private var animation
524    @State private var selectedItem: Item?
525 
526    var body: some View {
527        ZStack {
528            ScrollView {
529                LazyVGrid(columns: columns) {
530                    ForEach(items) { item in
531                        if selectedItem?.id != item.id {
532                            ItemCard(item: item)
533                                .matchedGeometryEffect(id: item.id, in: animation)
534                                .onTapGesture {
535                                    withAnimation(.spring(response: 0.3)) {
536                                        selectedItem = item
537                                    }
538                                }
539                        }
540                    }
541                }
542            }
543 
544            if let item = selectedItem {
545                ItemDetailView(item: item)
546                    .matchedGeometryEffect(id: item.id, in: animation)
547                    .onTapGesture {
548                        withAnimation(.spring(response: 0.3)) {
549                            selectedItem = nil
550                        }
551                    }
552            }
553        }
554    }
555}
556```
557