Tutorial: Circular Floating Menu that can be shown by long right-click or gesture

I'm trying to create small tutorials for various new features of BetterTouchTool.
This tutorial covers circular Floating Menus, it requires BetterTouchTool v4.790!

  • 1.) Create and configure new Floating Menu
  • 2.) Define how the menu will be shown
  • 3.) Make the menu show using a three finger swipe up
  • 4.) Make the menu show using a long right mouse click
  • 5.) How to customize the menu per application

The result of this tutorial looks like this:

Download the final preset here:
CircularMenuTutorial2.bttpreset (283.9 KB)

1.) Create and configure new Floating Menu

Go to the Floating Menu section in BTT and create a new menu.
In the "Menu Size & Item Layout Mode" section set the layout to "Circular Layout" and activate the "Place First Item At Center", "Allow Hover On Whole Pizza Slice" and "Highlight Pizza Slice" options.

Set the minimum menu size to 300x300

Add some item to the menu

Add a first item and set its sizes to 60 (min width, max width, min height and max height should all be the same)

Now lets make the item round by setting the border radius to 30 (half of the width/height)

Use icons instead of text

Remove the text and set the icon position to "Center (Icon Only)

Let's use an icon from Apple's SFSymbols instead of text for the item. For a reference of all SFSymbols available, I recommend to download Apple's official SFSymbols app: SF Symbols - Apple Developer

Add more items and icons

Now just copy & paste the item you created a few times. (cmd+c cmd+v)

Of course you can set different icons for every item.

Or you can use your own images as icon:

Styling the menu and its items

Add margin around items

First lets fix that pizza piece highlight. It should not touch the circle. To avoid this select all of your items and add some margin around them:

Remove menu background

We don't need any background for this menu:

For the items I'd like to also remove the background color but keep the blurr effect:

Or maybe set different background colors per item?

Ok, I think now it looks good enough for this tutorial. You could also change the background and border color of the pizza slice highlight if you'd want to.

Assigning some actions

Right now your menu doesn't do anything. You can assign any actions you like to your menu items.

2.) Define how the menu will be shown

Currently the menu is just visible when BTT launches. However instead we want to show the menu via some trigger by using the predefined action "Show Floating Menu".

Change default visibility:

Because we want to show the menu using an action let's modify the default visibility settings. After doing this your menu might not show up anymore.

Define menu position:

We want to make the menu show up centered at the current mouse position - unless the mouse is at the edge of the screen, in that case make sure to keep the menu on the screen:

3.) Make the menu show using a three finger swipe up

Now your menu is mostly ready to be used. We still need a way to actually show it. Let's start with a three finger swipe.

Go to the trackpad section in BetterTouchTool and add a three finger swipe up. Assign the predefined action "Show Floating Menu" and select your menu. Make sure to select the "Always Move & Resize To Defined Position When Showing" and "Trigger Hovered Item When Menu Is Being Hidden" options:

Now the menu will show up, but it will not hide again yet.

Make the menu hide & trigger an action when releasing all fingers from the trackpad

At the top of the Action Sequence, select "Actions Executed On Touch Release":

Then add a "Hide Floating Menu" action and configure it like this:

Done! Now you can show your menu by swiping up with three fingers, then once you remove all your fingers from the trackpad it will trigger the hovered item and hide the menu again.

4.) Make the menu show using a long right mouse click

Making the menu show & hide via a long right mouse click is a bit tricky as we still want to keep the standard right-mouse functionality.

To achieve this we'll make use of some advanced features in BetterTouchTool.

Go to the normal mouse section in BetterTouchTool

Create a right mouse click that triggers after 0.3 seconds


While this will show the floating menu, it will also trigger a standard right-click.
To avoid this add another right click trigger and set it to "Trigger on Mouse Up" and set the "Maximum hold time" to 0,3s. Then assign the right click action to it.

Great, now we can show the Floating Menu without triggering a standard right click when holding the right mouse button and we can still do a standard right-click when only briefly pressing the right mouse button.

However we do not have a way to hide the menu yet. Let's add another right mouse trigger. This one should trigger when releasing the right mouse button after the menu has been shown. This would allow us to show the menu by pressing the right mouse button, move the cursor to the desired menu item and finally release the mouse button to trigger & hide the menu.

The configuration for this should look like this:

Now almost everything should work as expected - however hover effects might not work yet. That is because by default macOS will not allow hover effects while a mouse button is pressed. To resolve this enable this setting (which is a bit hidden):

And here is the final preset:
CircularMenuTutorial2.bttpreset (283.9 KB)

5.) How to customize menu per application

Now lets say you want to display additional menu items while Finder is your active app (the same goes for any other app). To achieve that, copy the whole menu from your "For All Apps" section, select Finder in the side-bar and paste it there.

Now if Finder is active and you show the menu, every single one of your items will show twice. This is probably not what you'd want. It happens because BTT merges floating menus with the same identifier if both of them would be active.

To resolve this, just delete or modify the items in your new Finder menu. Only keep items you want to show in addition to the ones you have defined in the "For All Apps" section.

For more advanced use cases you might want to use conditional activation groups (e.g. to have a group of apps that shows the same items). Trigger Conditions & Conditional Activation Groups · GitBook

HI Andreas

Your preset of Radial App Switcher is already truly fantastic. It is both functional (the switch among apps are way faster than MacOS cmd-tab), and the UI is a pleasure to look at!
May I ask how to inlucde the script that generate the list of current opened apps to the new cicular floating menu?

Thanks in advance.

Try this preset:

//edit: I might have misunderstood what you need

1 Like

Hi,
I am already using your preset "circular_example.bttpreset" for the active apps. But in my eyes, the setting page of this previous preset is very much based on a circular template and content script, and is very different from the settings in this tutorial? So, I wonder if you have now implement a new floating menu type, and thus need a different content script to auto-fill the cicular menu items.


No it's still the same.

The script uses that one template item to style all of the app items. (If you change the style of that template item, all other items will use that style)

1 Like

Got it. Thanks again!

I may have requested this "circular menu" like 5 years ago. there used to be an app just like this but the dev stopped updating it like 5 years ago.

this is awesome.

I just experimented with submenus, which seems to work pretty well by placing another, larger, floating menu above the first one. Not sure whether that could be useful but I'll post instructions on how to achieve that soon.

1 Like

I don't know if it's a bug, but I'm experiencing strange behavior. This problem occurs not only with the circular menu but with all floating menus. When I set the Position on Screen to Center at Mouse Position Center and then move the mouse pointer to a second screen without clicking, the floating menu stays on the first screen when triggered.
example

is the second screen the focused one? I think currently if the „don’t move outside of screen“ option is ticked, it will keep it on the focused screen. I should change this to the mouse screen!

oh nice thanks you so much for your help, it fix my problem. BTT is so complex and so good at the same time :smiling_face:

  1. Use a minimized window, icons, and titles for display, similar to Alt + Tab.
  2. Create a circular interface that appears centered around the cursor when the mouse side button is pressed, as shown in the diagram.
    3. When the mouse hovers over app1, switch to app1 immediately and close the ring.
  3. Similar to Alt+Tab, we can customize whether to switch by clicking the app1 ring area or by moving the mouse over it.
  4. The size, style, and animations of the ring can all be adjusted.

How do I edit the name of the circle? "circular-example-menu"

The name can be changed here:

However as this is the identifier that is used to reference the menu, you'll need to change it everywhere you are using it (e.g. in the show or hide floating menu actions)

1 Like

ok thank you

i absolutely love this. i'm just wondering if there's a way to have the circle get slightly larger when you hover over it, rather than change background colour? i did have a root around in the settings, but if it's possible, i missed it. thanks again!

yes, you could use the "on hover" and "on hover end" triggers to call the "update menu item properties" action.

Here is an example (I only quickly did it for the first two items)

CircularMenuTutorial-size-change.bttpreset (289.7 KB)

You need to update the item size and the corner radius:

thanks, i'll give it a go!

edit: so i tried it and couldn't get it to work. i'll need to import the preset you kindly provided and have a look at it, but i've already done a lot of configuration on the original and don't want to overwrite it. what best practice?

edit 2: figured it out! thank you!

Sometimes the circle remains there after it launches an action, bug?
it only goes away after I click outside the circle

how are you triggering the menu / action? does that happen only with specific actions?