Logo for tanaschita.com

Quick guide on toolbars in SwiftUI

Learn how to add toolbar items to the bottom bar, the navigation bar, above the keyboard or in modal views with SwiftUI.

09 May 2022 · 3 min read

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:

Toolbar items in bottom bar
Toolbar items in bottom bar.

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.

ToolbarItem with a .principal placement.
Toolbar item with a .principal placement.

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:

Toolbar items with a .navigationBarTrailing placement.
Toolbar items with a .navigationBarTrailing placement.

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

Toolbar items with a .navigationBarLeading placement.
Toolbar item with a .navigationBarLeading placement.

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 above keyboard.
Toolbar items above keyboard.

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:

ToolbarItems in modal view.
Toolbar items in modal view.
Image of books
Further reading: SwiftUI by Example
For further reading, check out the SwiftUI by Example book by Paul Hudson. It guides you through dozens of common coding problems with hands-on solutions.

Newsletter

Receive a monthly newsletter about the latest articles and tips.

Image of a reading marmot

Related tags

Written by

Articles with related topics

Latest articles and tips