SwiftUI Navigation

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 { ... }

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") {} } }
    }
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { NavStackDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

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("...") }

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([.medium])
    }
    .alert("Are you sure?", isPresented: $showAlert) {
      Button("Cancel", role: .cancel) { }
      Button("OK", role: .destructive) { }
    } message: {
      Text("This is a confirmation alert.")
    }
    .padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { ModalDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

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) { ... }

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) }
    }
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { PathDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

This example uses a typed path to push an Int destination and pop it programmatically.