Toolbar Button Dropdown Position in macOS

My desktop app has a Toolbar button with a drop-down menu. On Windows the drop-down menu fits neatly directly under the toolbar button.


On macOS the drop-down menu covers the button text and a portion of the button icon.


Is this positioning common on macOS? Is there a way to position the drop-down menu via code?
MacOS version 13.6 (Ventura)

I think I remember a guideline saying not to include the text on toolbars on macOS, which possibly has something to do with the location. That said it doesn’t look good.

In the documentation for the Toolbar Editor, the example shows a toolbar with the Apple platform selected, and all of the buttons have text.

Oh man I seriously hope not. Apps that don’t have labels for their toolbars are so cryptic and hard to use. It’s the first setting I look for when trying a new app.

Yes, that’s Xojo documentation. I was talking about Apple guidelines.

That said Pages and Numbers have labels on their toolbars. Even Apple isn’t following that guideline all the time.

Can you provide an example project? I tried it in a native app and the menu appeared in the correct location.

This forum won’t allow me to upload an example project file.

Unfortunately you’ll need to upload it somewhere else to share it here on the forum. You could use your cloud provider (like Google Drive, OneDrive, or Dropbox). If you don’t want to do that, you could create an issues ticket (since it does appear to be an issue!) and attach the file there. Share the link here when it’s available. I am curious what’s going on.

Because Xojo only allows one machine per license, I compile on Windows and transfer the compiled build file to macOS. Here is a screenshot of my example project running on macOS:
Screenshot 2023-12-05 at 8.53.04 AM
Here is my example project:

Well I can confirm that no matter where I click the menu appears covering the label. It also doesn’t appear to be a problem with the Desktop-prefixed-controls as it happens with a normal Window and Toolbar as well.

The behavior I’m seeing in native apps varies by button type though. One app shows the menu below the toolbar for a button that indicates such, while another will show the menu lined up with the disclosure chevron that is on the button. It doesn’t seem like too many Mac apps use this menu-in-the-toolbar design anymore.

You should file an Issues ticket if you’d like to see the behavior changed. I’m not sure of anything off the top of my head that would correct for this. There may be declares, but declares with toolbars are a nightmare because under the hood Xojo destroys and recreates items far more frequently than you’d expect.

I’m sorry I can’t be of any more help. Thank you for sharing your findings and bringing this to everyone’s attention.

Thanks Tim. Maybe I’ll create my own popup menu as a work-around solution.

As a possible solution, I created a popup menu with this code in the Pressed event of the Toolbar:

Select Case item.Name
Case "tiTest"
  // Create a drop-down menu
  Var DropDownMenu As New DesktopMenuItem
  DropDownMenu.AddMenu(New DesktopMenuItem("Review this app", 9))
  DropDownMenu.AddMenu(New DesktopMenuItem("Report an issue", 1))
  Var selectedMenu As DesktopMenuItem
  toolbar11.tiTest.Menu = DropDownMenu.Popup(self.left + 93 , + -5)
End Select

When the toolbar button is clicked, the menu pops up, but when in click on a menu item, the MenuItemSelected event of the toolbar does not fire. Would anyone know why?

You aren’t using the Toolbar menu, so you won’t get the Toolbar’s event.

MenuItem.Popup is an execution stopping call that presents a menu. The return value is the selected menu item, or nil if the user chose nothing.

You want something like this:

var mnuSelected as MenuItem = DropDownMenu.Popup(System.MouseX + 20, System.MouseY + 20)

// User cancelled
if mnuSelected = nil then return

// User chose something
select case mnuSelected.Tag
case 9
  // Review

case 1
  // Report an issue

end select

Thanks Tim! That works! Problem resolved.