Quick guide on toolbars in SwiftUI

With iOS 14, Apple introduced the toolbar() modifier allowing us to add toolbar items to different places in SwiftUI views.

Depending on the configuration of the ToolbarItem we add inside a toolbar and the platform, the system places it accordingly.

In this article, we'll look at the toolbar, its configuration possibilities and appearance in the following places:

• toolbar items in the bottom bar
• toolbar items in the navigation bar
• toolbar items above the keyboard
• toolbar items in modal views

Let's jump in.

Toolbar items in the bottom bar

The code below adds two ToolbarItems with a .bottomBar placement.

var body: some View {
    NavigationView {
        Text("Hello, world!")
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button("action1", action: {})
            }
            ToolbarItem(placement: .bottomBar) {
                Button("action2", action: {})
            }
        }
    }
}

As we can see in the example, SwiftUI provides the toolbar modifier that we can use to add toolbar items. A ToolbarItem has two required parameters. The first one is the placement and the second one is a closure to build the view that represents our action.

The above example leads to the following result:

In case we add only one ToolbarItem, the action will be centered by the iOS system.

Toolbar items in the navigation bar

.principal placement

The .principal placement places the toolbar item in the center of the navigation bar.

var body: some View {
    NavigationView {
        // List...
        .navigationTitle("Title")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                SearchView(text: $viewModel.searchText)
            }
        }
    }
}

If a navigation bar title is also configured, it gets overridden by the toolbar item.

The example code above results in a search view being shown in the navigation bar instead of its title.

.navigationBarTrailing and navigationBarLeading placement

The .navigationBarTrailing and .navigationBarLeading placements place the toolbar items in the trailing or leading edge of the navigation bar.

They replace the deprecated .navigationBarItems() modifier which was used before for the same purpose.

var body: some View {
    NavigationView {
        // List...
        .navigationTitle("Title")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                SortButton()
            }
            ToolbarItem(placement: .navigationBarTrailing) {
                FilterButton()
            }
        }
    }
}

Resulting in:

Changing the placement to .navigationBarLeading places the item in the leading edge of the navigation bar.

When placing multiple toolbar items with the same placement, we can use a ToolbarItemGroup to avoid repetition.

.toolbar {
    ToolbarItemGroup(placement: .navigationBarTrailing) {
        SortButton()
        FilterButton()
    }
}

Toolbar items above keyboard

Another toolbar item placement possibility is .keyboard which places items above the keyboard when presented.

Toolbar items in modal views

Further placement options are .confirmationAction, .destructiveAction and .cancellationAction that we can use in toolbars presented by a modal view, for example when using the sheet() modifier.

var body: some View {
    NavigationView {
        Text("Sheet")
        .toolbar {
            ToolbarItem(placement: .confirmationAction) {
                Button("Confirm", action: {})
            }
            ToolbarItem(placement: .destructiveAction) {
                Button("Delete", action: {})
            }
            ToolbarItem(placement: .cancellationAction) {
                Button("Cancel", action: {})
            }
        }
        .foregroundColor(colorScheme.primaryColor)
    }
}

Resulting in: