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
