SwiftUI - ToolBar

Toolbar is a UI control in SwiftUI which is used to create a bar at the top or bottom of the app that contains buttons, titles, menus, or other items. It provides a most convenient way to display multiple controls together in a bar on the current view.

Generally, a toolbar is used with navigation views such as NavigationView or NavigationStack to enhance the user experience. Toolbar UI control generally works well with iOS, macOS, and watchOS.

Creating ToolBar in SwiftUI

In SwiftUI, we can create a toolbar with the help of toolbar() method. This method creates a toolbar with the given elements, where we can add elements in the toolbar with the help of ToolbarItem or ToolbarItemGroup.

ToolbarItem adds one element at a time in the toolbar, whereas ToolbarItemGroup adds multiple elements at the same time in the specified toolbar. A toolbar can contain various UI components such as Buttons, Sliders, Toggles, etc.

Syntax

Following is the syntax −

Toolbar{
   ToolbarItem(placement: ToolbarItemPlacement){
      //code
   }
   ToolbarItemGroup{
      //code
   }   
}

We can also adjust the placement of the elements in the toolbar with the help of the placement parameter. It provides various type of placements such as .automatic, .topBarLeading, toBarTrailing, .buttonBar, etc.

Example 1

The following SwiftUI program creates a toolbar with one button.

import SwiftUI

struct ContentView: View {
   var body: some View {
      NavigationView {
         Text("SwiftUI")
            .navigationTitle("Toolbar")
         
            // Toolbar with a single button
            .toolbar {
               ToolbarItem(placement: .navigationBarTrailing) {
                  Button(action: {
                     print("Button tapped!")
                  }) {
                     Image(systemName: "plus").font(.largeTitle)
                  }.background(.blue).foregroundStyle(.white)
               }
            }
      }
   }
}
#Preview {
   ContentView()
}   

Output

Example 2

The following SwiftUI program creates a toolbar which contains multiple elements such as system images, buttons, toggle, and slider.

import SwiftUI

struct ContentView: View {
   @State private var value1: Double = 5
   @State private var value2: Bool = true

   var body: some View {
      NavigationView {
         Text("TutorialsPoint")
            .font(.title)
            .toolbar {
               // Leading item
               ToolbarItem(placement: .navigationBarLeading) {
                  Button(action: {
                     print("Leading button tapped!")
                  }) {
                     Image(systemName: "chevron.left")
                  }
               }
               
               // Trailing item 1 - Slider
               ToolbarItem(placement: .navigationBarTrailing) {
                  Slider(value: $value1, in: 0...10)
                     .frame(width: 150)
               }
               
               // Trailing item 2 - Toggle
               ToolbarItem(placement: .navigationBarTrailing) {
                  Toggle("On/Off", isOn: $value2)
                     .padding()
               }
               
               // Trailing item 3 - Button
               ToolbarItem(placement: .navigationBarTrailing) {
                  Button(action: {
                     print("Trailing button tapped!")
                  }) {
                     Image(systemName: "gear")
                  }
               }
               
            }
      }
   }
}
#Preview {
   ContentView()
}   

Output