Understanding toolbars in SwiftUI

SwiftUI's toolbar() modifier allows us to add items to various toolbars, such as the navigation bar, bottom bar, and even above the keyboard or in modal views. Depending on the configuration of the ToolbarItem and the platform, the system places the items accordingly.

In this article, we'll explore how to use the toolbar() modifier in SwiftUI and how to place toolbar items in different parts of our app's UI. Let's jump in.

Architecture & Design Patterns for iOS

This book is a practical guide to essential architectural principles and design patterns for iOS development. It covers strategies for building maintainable apps with Swift and SwiftUI, including dependency injection, navigation, common patterns, and modularization.

LEARN MORE

Toolbar items in the bottom bar

The .bottomBar placement is commonly used for actions that need to be available at the bottom of the screen, such as navigation controls, context actions, or any items that should be easily accessible when the user is at the bottom of the interface.

Here's an example of how to add toolbar items to the bottom bar:

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

The above example results in the following:

If only one toolbar item is added, it will automatically be centered.

Toolbar items in the navigation bar

.principal placement

The .principal placement allows us to place a toolbar item in the center of the navigation bar, often used for search fields or custom titles.

var body: some View {
    NavigationStack {
        contentView
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                SearchView(text: $viewModel.searchText)
            }
        }
    }
}

This places a search view in the center of the navigation bar, replacing the 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 {
    NavigationStack {
        contentView
        .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. This is especially useful for adding "Previous" and "Next" buttons when interacting with text fields.

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 {
    NavigationStack {
        Text("Sheet")
        .toolbar {
            ToolbarItem(placement: .confirmationAction) {
                Button("Confirm", action: {})
            }
            ToolbarItem(placement: .destructiveAction) {
                Button("Delete", action: {})
            }
            ToolbarItem(placement: .cancellationAction) {
                Button("Cancel", action: {})
            }
        }
    }
}

Resulting in: