Create a toolbar and add buttons to it in SwiftUI

In this tutorial, we will see how to create a toolbar and add buttons to it in SwiftUI.

A toolbar is like a row of buttons at the top or bottom of our computer screen or app. It makes it easy to do common things quickly, like saving a file or changing the font in a document. It is like having our favorite tools in an easy-to-reach place.

SwiftUI provides a handy modifier called toolbar() to add a toolbar to our view. We can create a toolbar and add buttons to it in various methods.

Using ToolbarItemGroup

In SwiftUI, a ToolbarItemGroup is a way to group and arrange multiple buttons or controls together in a toolbar. It helps us keep things nice and tidy.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            Text("Hello, Toolbar!")
                .navigationTitle("SwiftUI Toolbar Example")
                .toolbar {
                    ToolbarItemGroup(placement: .navigationBarLeading) {
                        Button("Share") {
                            // Handle share action
                            print("Sharing something!")
                        }
                    }
                    
                    ToolbarItemGroup(placement: .navigationBarTrailing) {
                        Button("Edit") {
                            // Handle edit action
                            print("Editing something!")
                        }
                    }
                }
        }
    }
}

In the above program, I have used the toolbar() modifier to create a toolbar and add buttons to it for the navigation bar. In this example, there are two groups of toolbar items.

• The first group (.navigationBarLeading) has a “Share” button on the leading (left) side of the navigation bar.  When we tap this button, it will display a message “Sharing something!” in the console.
• The second group (.navigationBarTrailing) has an “Edit” button on the trailing (right) side of the navigation bar.  When we tap this button, it will display a message “Editing something!” in the console.

So, it is a simple SwiftUI program that will create a view with a navigation bar, a text label, and a toolbar with two buttons for sharing and editing.

Output:

Using the ToolbarItem

We can also use the ToolbarItem instead of ToolbarItemGroup to add buttons in a toolbar in SwiftUI.

Have a look at the example below.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Hello, Toolbar!")
                .navigationTitle("SwiftUI Toolbar Example")
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button("Share") {
                            // Handle share action
                            print("Sharing something!")
                        }
                    }
                    
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("Edit") {
                            // Handle edit action
                            print("Editing something!")
                        }
                    }
                }
        }
    }
}

The above code will also create a simple app interface with a navigation bar, a title, and two toolbar buttons (“Share” and “Edit”). When we tap the “Share” or “Edit” buttons, it will print corresponding messages to the console.

Output:

We can also add those toolbar buttons only on the leading (left) or trailing (right) side of the navigation bar. We can do that by embedding those buttons into a single ToolbarItem and specifying the placement to leading or trailing.

Now, have a look at the example below.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            Text("Hello, Toolbar!")
                .navigationTitle("SwiftUI Toolbar Example")
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        HStack {
                            Button("Share") {
                                // Handle edit action
                                print("Sharing something!")
                            }
                            Button("Edit") {
                                // Handle delete action
                                print("Editing something!")
                            }
                        }
                    }
                }
        }
    }
}

As you can see in the above program, I have removed the ToolbarItem(placement: .navigationBarLeading) section, so there is only one toolbar item on the trailing side.

Then, Inside the trailing toolbar item, I used a HStack to horizontally stack the “Edit” and “Delete” buttons.

Output:

We can specify the Placement of the ToolbarItem to .navigationBarTrailing to have those buttons on the trailing (right) side of the navigation bar.