How to make a custom view in a Menu, like Apple Files app

101 views Asked by At

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:

1

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?

0

There are 0 answers