SwiftUI Navigation Toolbar & Bar Items

SwiftUI Navigation: Toolbar & Bar Items

Add actions and controls to the navigation bar with .toolbar and ToolbarItem.

Basic toolbar

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

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

import SwiftUI

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

import SwiftUI

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

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.

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

import SwiftUI

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

import SwiftUI

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

In the example above, the .bottomBar and .keyboard placements are used.