How it works
A ToolbarItem represents a single model item you place inside a toolbar modifier, pairing a piece of content with a placement that tells SwiftUI where in the interface chrome it belongs. Rather than positioning buttons and controls manually, you describe each one as a toolbar item and let the system resolve it to the correct location for the current platform and context — a navigation bar on iOS, a window toolbar on macOS. Reach for ToolbarItem when you need precise, semantic control over where an individual control lands, especially when distributing items across the leading and trailing edges of a navigation bar.
Declare items inside the toolbar modifier
ToolbarItemonly has meaning within the closure passed to the.toolbarmodifier, which collects the items and renders them into the surrounding chrome. In the example eachToolbarItemlives in the.toolbar { }attached to theText("Inbox")content, and the enclosingNavigationStackplus.navigationTitle("Mail")provide the bar those items populate.Position the item with the placement parameter
The
placementparameter takes aToolbarItemPlacementvalue that gives the item a semantic position rather than a fixed coordinate, so SwiftUI can adapt it per platform. The first item uses.topBarTrailingto sit at the trailing edge of the navigation bar, while the second uses.topBarLeadingto anchor at the leading edge.Supply the content as a trailing closure
Each
ToolbarItemwraps a view-building closure that defines what the item actually shows, so any view — a button, an image, or a custom control — can become a toolbar item. Here one item's closure holds aButtonwhose label is anImage(systemName: "square.and.pencil"), and the other simply holds anImage(systemName: "line.3.horizontal").Combine multiple items in one toolbar
Because
ToolbarItemis a single discrete unit, you list several of them in the same.toolbarclosure and SwiftUI lays each out according to its ownplacement. The example declares two independent items in sequence, letting the compose-button land on the trailing side and the menu glyph on the leading side without either affecting the other.
placement from .topBarLeading to .topBarTrailing and watch both controls collapse onto the trailing edge of the navigation bar.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct ToolbarItemDemo: View {
var body: some View {
NavigationStack {
Text("Inbox")
.padding()
.navigationTitle("Mail")
.toolbar {
ToolbarItem(placement: .topBarTrailing) {
Button {
} label: {
Image(systemName: "square.and.pencil")
}
}
ToolbarItem(placement: .topBarLeading) {
Image(systemName: "line.3.horizontal")
}
}
}
}
}