SwiftUI Navigation Toolbar & Bar Items

Basic toolbar

Add leading and trailing bar buttons using .toolbar with ToolbarItem placements.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct ToolbarBasicDemo: View {
  var body: some View {
NavigationStack {
  Text("Content")
    .navigationTitle("Toolbar")
    .toolbar {
      ToolbarItem(placement: .navigationBarLeading) { Button("Cancel") {} }
      ToolbarItem(placement: .navigationBarTrailing) { Button("Add") {} }
    }
}
  }
}

In the example above, the .toolbar modifier adds a leading Cancel and trailing Add button.

---

---

Placements

Place items at the bottom bar or show keyboard-anchored actions.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct ToolbarPlacementsDemo: View {
  @State private var text = ""
  var body: some View {
NavigationStack {
  VStack(spacing: 12) {
    TextField("Type...", text: $text).textFieldStyle(.roundedBorder)
  }
  .padding()
  .navigationTitle("Placements")
  .toolbar {
    ToolbarItem(placement: .bottomBar) { Button("Edit") {} }
    ToolbarItemGroup(placement: .keyboard) { Spacer(); Button("Done") { } }
  }
}
  }
}