How to Use Toolbar in SwiftUI: Syntax and Examples

In SwiftUI, you use the toolbar modifier to add a toolbar to your view. Inside toolbar, you define ToolbarItem or ToolbarItemGroup to specify buttons or other controls that appear in the toolbar.

Syntax

The toolbar modifier attaches a toolbar to a view, typically a NavigationView or NavigationStack. Inside it, you add one or more ToolbarItem or ToolbarItemGroup specifying the placement and content.

• placement: Defines where the item appears (e.g., .navigationBarTrailing, .bottomBar).
• content: The view shown in the toolbar, usually a Button or Image.

swift

toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        Button(action: { /* action */ }) {
            Image(systemName: "plus")
        }
    }
}

Output

A toolbar button with a plus icon appears on the top right of the navigation bar.

Example

This example shows a simple SwiftUI view with a navigation bar and a toolbar button on the trailing side. Tapping the button prints a message to the console.

swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            Text("Hello, Toolbar!")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button {
                            print("Toolbar button tapped")
                        } label: {
                            Image(systemName: "plus")
                        }
                    }
                }
                .navigationTitle("Toolbar Demo")
        }
    }
}

Output

A screen with title 'Toolbar Demo' and a plus icon button on the top right; tapping the button logs 'Toolbar button tapped' in the console.

Common Pitfalls

Common mistakes when using toolbar include:

• Not placing the toolbar inside a NavigationStack or NavigationView, so the toolbar does not appear.
• Using incorrect placement values, causing items to not show or appear in unexpected places.
• Forgetting to provide a visible label or image for toolbar buttons, resulting in invisible or empty toolbar items.

swift

/* Wrong: toolbar outside NavigationStack - toolbar won't show */
Text("No toolbar")
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Button("Tap") {}
        }
    }

/* Right: toolbar inside NavigationStack */
NavigationStack {
    Text("With toolbar")
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Button("Tap") {}
            }
        }
}

Output

First code shows no toolbar; second code shows a toolbar button on the top right.

Quick Reference

Property	Description	Example Values
toolbar	Modifier to add toolbar items to a view	toolbar { ToolbarItem(...) }
ToolbarItem	Defines a single toolbar item	ToolbarItem(placement: .navigationBarLeading) { Button(...) }
placement	Where the toolbar item appears	.navigationBarLeading, .navigationBarTrailing, .bottomBar, .principal
Button	Interactive control inside toolbar	Button { action } label: { Image(systemName: "plus") }

Key Takeaways

Use the toolbar modifier inside a NavigationStack or NavigationView to add toolbars.

Define toolbar items with ToolbarItem and specify their placement for correct positioning.

Always provide visible content like Button or Image inside ToolbarItem for user interaction.

Common mistakes include placing toolbar outside navigation context or missing placement.

Toolbar supports multiple items and groups for flexible UI design.