How it works
ToolbarItemPlacement describes where a toolbar item should appear within a view's toolbar, letting you assign each control to a semantic region rather than a fixed pixel position. You pass one of its values to a ToolbarItem so SwiftUI can resolve the right location for the current platform, container, and layout direction. Reach for it whenever a toolbar holds more than one item and you need to control which side, edge, or prominent slot each one occupies.
Pass a placement to ToolbarItem(placement:)
Each ToolbarItem takes a ToolbarItemPlacement as its placement: argument, binding that item to a semantic region of the toolbar. In the example three items live inside the same
.toolbarclosure, and each receives a different placement so SwiftUI can lay them out independently.Anchor leading and trailing items
The
.navigationBarLeadingand.navigationBarTrailingvalues pin an item to the start or end of a navigation bar, respecting the locale's layout direction. Here theCancelbutton takes.navigationBarLeadingand theSavebutton takes.navigationBarTrailing, producing the familiar dismiss-on-the-left, confirm-on-the-right arrangement.Claim the prominent center slot with .principal
The
.principalplacement puts an item in the toolbar's primary, centered position — typically where the title sits. The example gives that slot to a styledText("Draft")so it reads as the focal label of the bar instead of an ordinary trailing control.Let placement adapt to the container
ToolbarItemPlacement values are semantic, so the same placement can resolve differently depending on the surrounding container and platform. Because these items sit inside a
NavigationStackwith anavigationTitle, the navigation-bar placements map onto that bar's leading, trailing, and principal regions automatically.
.principal placement on the Text("Draft") item to .navigationBarTrailing and watch it leave the center to crowd in beside the Save button.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 ToolbarItemPlacementDemo: View {
var body: some View {
NavigationStack {
Text("Edit your note")
.padding()
.navigationTitle("Notes")
.toolbar {
ToolbarItem(placement: .principal) {
Text("Draft").font(.headline)
}
ToolbarItem(placement: .navigationBarLeading) {
Button("Cancel") {}
}
ToolbarItem(placement: .navigationBarTrailing) {
Button("Save") {}
}
}
}
}
}