SwiftUI Navigation

Learn to navigate with NavigationStack, push screens with NavigationLink, and present sheets and alerts.

NavigationStack and NavigationLink

Use NavigationStack with NavigationLink to push views onto a stack.

Add titles and toolbar items.

Syntax:

NavigationStack { List { NavigationLink("Title", destination: Detail()) } }
.navigationTitle("Title")
.toolbar { ... }

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct Detail: View {
  let text: String
  var body: some View { Text(text).navigationTitle("Detail") }
}

struct NavStackDemo: View {
  var body: some View {
NavigationStack {
  List(1...3, id: \.self) { i in
    NavigationLink("Item \(i)", destination: Detail(text: "Item \(i)"))
  }
  .navigationTitle("Items")
  .toolbar { ToolbarItem(placement: .navigationBarTrailing) { Button("Add") {} } }
}  }
}

This example builds a stack of items and pushes a Detail view when a row is tapped, with a title and a trailing toolbar button.

Modal Presentation

Present sheets with .sheet(isPresented:) and alerts with .alert.

Syntax:

.sheet(isPresented: $flag) { View() }
.alert("Title", isPresented: $flag) { Buttons... } message: { Text("...") }

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct ModalDemo: View {
  @State private var showSheet = false
  @State private var showAlert = false

  var body: some View {
VStack(spacing: 12) {
  Button("Show Sheet") { showSheet = true }
  Button("Show Alert") { showAlert = true }
}
.sheet(isPresented: $showSheet) {
  VStack(spacing: 12) {
    Text("Hello from a sheet!")
    Button("Close") { showSheet = false }
  }
  .padding()
  .presentationDetents(&#91;.medium])
}
.alert("Are you sure?", isPresented: $showAlert) {
  Button("Cancel", role: .cancel) { }
  Button("OK", role: .destructive) { }
} message: {
  Text("This is a confirmation alert.")
}
.padding()  }
}

This example toggles booleans to present a sheet and an alert; the sheet uses a medium detent and a simple close button.

Programmatic Navigation (NavigationPath)

Drive navigation in code by updating a NavigationPath or typed path binding.

Syntax:

@State private var path: [T] = []
NavigationStack(path: $path) { ... }
.navigationDestination(for: T.self) { ... }

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct NumberDetail: View {
  let n: Int
  var body: some View { Text("Number: \(n)") }
}

struct PathDemo: View {
  @State private var path: [Int] = []
  var body: some View {
NavigationStack(path: $path) {
  VStack(spacing: 12) {
    Button("Go to 42") { path.append(42) }
    Button("Back") { if !path.isEmpty { _ = path.removeLast() } }
  }
  .navigationTitle("Path Demo")
  .navigationDestination(for: Int.self) { n in NumberDetail(n: n) }
}  }
}

SwiftUI Navigation