TechnologiesSwiftUI

CompactMenuControlGroupStyle struct

iOSmacOStvOSwatchOSvisionOS✓ renders

A control group style that presents its content as a compact menu when the user

How it works

CompactMenuControlGroupStyle is a ControlGroupStyle that collapses a group of controls into a single, space-efficient menu. Instead of laying the group's controls out inline, it presents them behind one compact control that, when activated, reveals the members in a pop-up menu. Reach for it when a ControlGroup holds related actions that you want to keep available without dedicating a full row of toolbar or layout space to them. You apply it through the controlGroupStyle(_:) modifier using the type's matching .compactMenu static value rather than constructing the style directly.

  1. Group related controls with ControlGroup

    CompactMenuControlGroupStyle styles a ControlGroup, so the symbol only takes effect on the controls you bundle into one. In the example the group gathers three Button actions — Cut, Copy, and Paste — which the compact-menu style will treat as the menu's members.

  2. Provide a label for the collapsed control

    Because the style hides the members behind a single control, it needs something to show in the collapsed state. The trailing label: closure supplies that affordance — here a Label("Edit", systemImage: "pencil") — which becomes the tappable control that opens the menu.

  3. Apply the style with controlGroupStyle(.compactMenu)

    You opt into CompactMenuControlGroupStyle through the .controlGroupStyle(.compactMenu) modifier. The .compactMenu static member resolves to this style, so SwiftUI renders the group as the compact label control plus a pop-up menu rather than as inline buttons.

  4. Inherit the menu presentation from the style

    Once the style is attached, CompactMenuControlGroupStyle owns how the members appear: the Cut, Copy, and Paste buttons surface as rows inside the menu that the pencil label control presents, and each button's systemImage ("scissors", "doc.on.doc", "doc.on.clipboard") carries through as the menu-row icon.

Try it — Swap .controlGroupStyle(.compactMenu) for .controlGroupStyle(.navigation) and watch the same Cut/Copy/Paste group expand into inline controls instead of collapsing behind the Edit menu.

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.

CompactMenuControlGroupStyle.swift
struct CompactMenuControlGroupStyleDemo: View {
    var body: some View {
        ControlGroup {
            Button("Cut", systemImage: "scissors") {}
            Button("Copy", systemImage: "doc.on.doc") {}
            Button("Paste", systemImage: "doc.on.clipboard") {}
        } label: {
            Label("Edit", systemImage: "pencil")
        }
        .controlGroupStyle(.compactMenu)
        .padding()
    }
}
Live preview
Edit Cut Copy Paste
Edit Cut Copy Paste
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →