How it works
ToolbarItemGroup is a toolbar content type that places several related controls into a single shared region of a toolbar, all governed by one placement. Reach for it when you have a cluster of items — formatting buttons, view-mode toggles, a set of actions — that logically belong together and should land in the same spot. Where a ToolbarItem positions one view, ToolbarItemGroup positions many at once, letting the system lay them out and adapt them as a unit. You supply it inside a .toolbar closure, the same place every other toolbar content lives.
Add toolbar content with the
.toolbarmodifierToolbar content is declared by attaching
.toolbarto a view inside a navigation container. In the example the modifier hangs off theText("Document")view within aNavigationStack, and its closure is whereToolbarItemGroupis placed. The group only takes effect because it lives in this toolbar-content context.Group related controls with
ToolbarItemGroupToolbarItemGroupwraps a@ViewBuilderof toolbar views, so you list the controls directly in its trailing closure and they are treated as one cohesive set. Here the three formattingButtons — bold, italic, and underline — are declared back-to-back inside the group, sharing its layout and placement instead of each needing its ownToolbarItem.Position the whole group with
placementThe
placementparameter takes aToolbarItemPlacementthat decides where the entire group is shown, so every control inside moves together. In the exampleplacement: .bottomBarsends all three buttons to the bottom toolbar at once; changing this single value relocates the whole cluster rather than any one button.Supply the controls as ordinary toolbar views
The contents of a
ToolbarItemGroupare normal SwiftUI views, typically interactive controls. The example usesButtonviews whoselabelis anImage(systemName:)—"bold","italic", and"underline"— and the group preserves their declared order, keeping the icons adjacent and consistently spaced as a toolbar segment.
placement: .bottomBar to .navigationBarTrailing (or .primaryAction) and watch all three buttons move to the top trailing edge together, confirming that the group's single placement controls every item it contains.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 ToolbarItemGroupDemo: View {
var body: some View {
NavigationStack {
Text("Document")
.padding()
.navigationTitle("Editor")
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
Button {
} label: {
Image(systemName: "bold")
}
Button {
} label: {
Image(systemName: "italic")
}
Button {
} label: {
Image(systemName: "underline")
}
}
}
}
}
}