How to Customize Toolbar and Navigation Bar in SwiftUI

The Toolbar API has been available for a considerable period, having been introduced with the release of iOS 14. It was a valuable addition to the SwiftUI framework, enabling developers to incorporate menu items in the navigation and bottom bars. In iOS 16, Apple unveiled additional modifiers to further enhance the customization of toolbars and provide developers with greater control over their appearance.

In this tutorial, let me show you how to work with toolbars and manage its customizations.

Using the Toolbar Modifier to Populate Navigation Bar Items

Whether you need to populate items in navigation bars or toolbars, you can utilize the .toolbar modifier to achieve this objective. Here is an example:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List(1..<10, id: \.self) { index in
                NavigationLink("Item \(index)") {
                    Image("legomen")
                        .resizable()
                        .ignoresSafeArea()
                }
            }
 
            .navigationTitle("Toolbar Demo")
 
            .toolbar {
                Button {
                    // action
                } label: {
                    Image(systemName: "plus")
                }…