TechnologiesSwiftUI

LabeledToolbarItemGroupContent struct

iOSmacOStvOSwatchOSvisionOSiOS 16.0+✓ renders

A view that represents the view of a toolbar item group with a specified

How it works

LabeledToolbarItemGroupContent is the content type SwiftUI produces when you give a ToolbarItemGroup both its set of controls and a label. It pairs a group of related toolbar items with a single representative label, so the system can present the items inline when there is room and collapse them behind that label — as an overflow menu or a compact control — when space is tight. Reach for it whenever several toolbar actions belong together conceptually and you want the platform to decide how much of the group to surface, rather than wiring up the collapse behavior yourself.

  1. Build the group inside a toolbar with ToolbarItemGroup(placement:)

    LabeledToolbarItemGroupContent is created for you when you construct a ToolbarItemGroup that takes a label. You declare it in a .toolbar closure and give it a placement that tells SwiftUI where the group belongs; here ToolbarItemGroup(placement: .primaryAction) anchors the formatting controls in the leading action area.

  2. Supply the grouped controls as the content closure

    The first trailing closure holds the items that travel together. Each becomes part of the same labeled group, so they collapse and expand as a unit. In the example the three Button("Bold", systemImage: "bold"), Button("Italic", systemImage: "italic"), and Button("Underline", systemImage: "underline") controls form one cohesive formatting cluster.

  3. Provide the representative label with the label: closure

    The label: closure is what makes this a labeled group rather than a plain ToolbarItemGroup — it is the single title and glyph that stands in for the whole cluster when SwiftUI collapses it. The Label("Format", systemImage: "textformat") here gives the group a name and icon, so the collapsed presentation reads as "Format" with the textformat symbol and expands to reveal the individual buttons.

  4. Let placement and available space drive presentation

    Because the group carries its own label, SwiftUI can choose between showing the items inline and folding them under the label based on the current layout. You don't toggle this; the LabeledToolbarItemGroupContent the initializer returns is the value the toolbar uses to manage that adaptive behavior across size classes and window widths.

Try it — Add a fourth Button("Strikethrough", systemImage: "strikethrough") {} to the content closure and narrow the window — watch the labeled group collapse the buttons under the Label("Format", systemImage: "textformat") instead of laying them all out inline.

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.

LabeledToolbarItemGroupContent.swift
struct LabeledToolbarItemGroupContentDemo: View {
    var body: some View {
        NavigationStack {
            Text("Edit your document")
                .padding()
                .toolbar {
                    ToolbarItemGroup(placement: .primaryAction) {
                        Button("Bold", systemImage: "bold") {}
                        Button("Italic", systemImage: "italic") {}
                        Button("Underline", systemImage: "underline") {}
                    } label: {
                        Label("Format", systemImage: "textformat")
                    }
                }
        }
    }
}
Live preview
Edit your document 9:41
Edit your document 9:41
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →