Inline Horizontal Buttons in SwiftUI Menu

Question

In SwiftUI, there is a thing called a Menu, and in it you can have Buttons, Dividers, other Menus, etc. Here's an example of one I'm building below:

import SwiftUI

func testing() {
    print("Hello")
}

struct ContentView: View {
    var body: some View {
        VStack {
            Menu {
                Button(action: testing) {
                    Label("Button 1", systemImage: "pencil.tip.crop.circle.badge.plus")
                }
                Button(action: testing) {
                    Label("Button 2", systemImage: "doc")
                }
            }
        label: {
            Label("", systemImage: "ellipsis.circle")
        }
        }
    }
}

So, in the SwiftUI Playgrounds app, they have this menu:

My question is:

How did they make the circled menu option? I’ve found a few other cases of this horizontal set of buttons in a Menu, like this one below:

HStacks and other obvious attempts have all failed. I’ve looked at adding a MenuStyle, but the Apple’s docs on that are very lacking, only showing an example of adding a red border to the menu button. Not sure that’s the right path anyway.

I’ve only been able to get Dividers() and Buttons() to show up in the Menu:

I’ve also only been able to find code examples that show those two, despite seeing examples of other options in Apps out there.

Answer 1

Starting with iOS 16.4 / macOS 13.3, it is possible to accomplish this by using ControlGroup in a Menu.

Menu {
    ControlGroup {
        Button { } label: {
            Image(systemName: "1.circle.fill")
        }

        Button { } label: {
            Image(systemName: "2.circle.fill")
        }

        Button { } label: {
            Image(systemName: "3.circle.fill")
        }                  
    }
}

You can add the .controlGroupStyle modifier to the ControlGroup to change how the buttons appear. .menu is the default style. You can place up to three buttons side-by-side with .menu, or up to four with .compactMenu.