I want to customize the dropdown (or overflow menu as Apple calls it) from a navigation toolbar button, similar to the toolbarTitleMenu in native Files app:
The list part of the menu is straight forward and I know that inline buttons for example can be achieved with ControlGroup
, but this is something else.
What I think I see
It looks to me like an HStack, containing an image (the folder), a VStack with the text (“Downloads” and “Folder”) and finally a share button with a circle button shape. I know you can’t do this but I would have wanted to do this:
Menu {
HStack {
Image("downloads.folder")
VStack {
Text("Downloads")
Text("Folder")
}
Button {
// Share action
} label: {
Image(systemName: "square.and.arrow.up")
}
// More menu buttons
}
I’ve looked into .popover
where you can use any view struct you like but popovers have that arrow anchor which doesn’t seem to be the case here. Maybe there is a way to hide that..?
Question
Is there a native, or reasonably straightforward, way to create this type of menu item like the screenshot above? Combining a normal menu with a separate view or stack (if that’s what’s going on)?
Note Above code can not be put in a menu like that, I know this but it’s a way to visualize in code what I’m trying to achieve. How did Apple achieve this?