# How do I build this floating menu? **URL:** \ **Category:** Configuration Help & General Discussion\ **Created:** [October 11, 2026, 10:58am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993 "2026-10-11T10:58:49Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Frank1](https://community.folivora.ai/letter_avatar_proxy/v4/letter/f/a87d85/32.png) [@Frank1](https://community.folivora.ai/u/Frank1)\ **Post date:** [October 11, 2026, 10:58am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/1 "2026-10-11T10:58:49Z")
I'm out of practice with floating menus because I hardly ever use them anymore. But now I need one that looks like this: 6 buttons arranged like this. ![image](https://community.folivora.ai/uploads/default/original/3X/b/5/b5cda1f81c94e855a7efd6b8892a17b79a3c07ba.png) Unfortunately, I have no idea how to build it. Can anyone help? Thanks. ---
**Author:** ![Frank1](https://community.folivora.ai/letter_avatar_proxy/v4/letter/f/a87d85/32.png) [@Frank1](https://community.folivora.ai/u/Frank1)\ **Post date:** [October 11, 2026, 1:04pm UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/2 "2026-10-11T13:04:27Z")
![image](https://community.folivora.ai/uploads/default/original/3X/b/7/b79d6302ffce632da946f7e986b80b316774bc3c.png) It would be best if you could drag and drop these “New Item” buttons to wherever you want them. I guess that's not possible? ---
**Author:** ![Frank1](https://community.folivora.ai/letter_avatar_proxy/v4/letter/f/a87d85/32.png) [@Frank1](https://community.folivora.ai/u/Frank1)\ **Post date:** [October 11, 2026, 3:34pm UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/3 "2026-10-11T15:34:02Z")
Okay, what works are 6 different floating menus that can be shown or hidden at the same time. ---
**Author:** ![Frank1](https://community.folivora.ai/letter_avatar_proxy/v4/letter/f/a87d85/32.png) [@Frank1](https://community.folivora.ai/u/Frank1)\ **Post date:** [October 11, 2026, 8:54pm UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/4 "2026-10-11T20:54:50Z")
@Andreas_Hegenberg I've positioned a floating menu at a specific place (freely) on an external monitor. What setting do I need to select so that it appears at the same (relative place) on the internal monitor when the external monitor isn't connected? ---
**Author:** ![telephant](https://community.folivora.ai/letter_avatar_proxy/v4/letter/t/b38774/32.png) [@telephant](https://community.folivora.ai/u/telephant)\ **Post date:** [October 12, 2026, 12:20am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/5 "2026-10-12T00:20:13Z")
In most UI toolkits, one way of dealing with custom widget placement is to add "spacer" items that are intended to take up space but to be mostly not visible. I made a couple of floating menus in BTT with this technique to approximate your example, which are in the attached preset (menus "test 3", "test 4", "test 5") [Button Placement Sample.bttpreset](https://community.folivora.ai/uploads/short-url/oWIg6ERm9opuk3mx79rHJdDMgwp.bttpreset) (131.1 KB) I think the best one one of these is test 5, which looks like this: ![Screenshot 2026-10-11 at 8.08.02 PM](https://community.folivora.ai/uploads/default/original/3X/e/8/e84dfcbeceddf6a5292290cb458f53f5169d1ce0.png) This version actually only uses one spacer for the middle empty spot (between red "New Item" and blue "New Item", I'll explain this a little more in a minute). The rest of the layout just uses a row layout and "Row Breaker"s to get all of the buttons into the correct rows. The other two versions are a little more complicated in that they use dummy items in the corners also to fill the spaces. This works great against a light background, but not so well against a dark background: Light background: ![Screenshot 2026-10-11 at 7.58.47 PM](https://community.folivora.ai/uploads/default/original/3X/b/8/b8dedbff786cce11506c5bba50a8703360feaf5f.png) Dark background: ![Screenshot 2026-10-11 at 7.56.23 PM](https://community.folivora.ai/uploads/default/original/3X/e/a/ea299834855270c302f6a360951eb823dffe38c4.jpeg) The top menu of each of these is "test 5". You can see that against the dark background, the spacers are visible. Here, each spacer is just a standard floating menu item that has no actions and has the same background color as the hover background color. To get the spacers to be (almost) invisble, I set both the background color and the hover background color to be the color of the floating menu background (using the eyedroppper), but I guess maybe the menu background color changes depending on the colors behind it. It would be easier to do this with an actual "spacer" item that just takes up space but is not visible, but I don't see how to do that in BTT. @Andreas_Hegenberg - Does the BTT floating menu have some kind of spacer items? If not, would you consider adding this? ---
**Author:** ![Andreas\_Hegenberg](https://community.folivora.ai/user_avatar/community.folivora.ai/andreas_hegenberg/32/39221_2.png) [@Andreas\_Hegenberg](https://community.folivora.ai/u/Andreas_Hegenberg)\ **Post date:** [October 12, 2026, 5:56am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/6 "2026-10-12T05:56:23Z")
There are multiple ways to build such menus. ## Option 1: Use spacers / margins @telephant there are no explicit spacer items, but transparent items are essentially the same. Alternatively you can use the margin options that are available for every item: ![image](https://community.folivora.ai/uploads/default/original/3X/4/5/45f69958bb3f044f71b9cdab0ab380dff1490ab0.jpeg) To create a "new row" (in the screenshot after "template item 1" add a "row breaker" item: ![image](https://community.folivora.ai/uploads/default/original/3X/5/a/5a2686b58e5f7adb6605b4fd20357d6e46ab3f64.webp) ## Option 2: Use absolute positioning - Set the menu to use absolute positioning: - Define the exact position for each item: For absolute positioning I'll add a way to just drag them around in the new visual editor in the next build. ---
**Author:** ![Frank1](https://community.folivora.ai/letter_avatar_proxy/v4/letter/f/a87d85/32.png) [@Frank1](https://community.folivora.ai/u/Frank1)\ **Post date:** [October 12, 2026, 6:43am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/7 "2026-10-12T06:43:18Z")
Thank you very much, @telephant and @Andreas_Hegenberg . I’ve tried solutions like that. They’re too complicated for my purposes because this menu is dynamic and will be changing constantly over the next few months, both in terms of the position and the number of buttons. > [@Andreas\_Hegenberg](#): > > For absolute positioning I'll add a way to just drag them around in the new visual editor in the next build. **That would be great and exactly what I need**. Until then, it seems to me that the easiest solution is to have a separate floating menu for each button. That way, everything can be adjusted very quickly and easily using drag-and-drop. The downside is that you don’t have a consistent background. ![image](https://community.folivora.ai/uploads/default/original/3X/0/4/049d97ce430133e1e2c739a1abaf9e056ecf0515.png) This change takes 5 seconds 🙂 ![image](https://community.folivora.ai/uploads/default/original/3X/a/6/a69a5785f9f5a60080d44c4fe9eb0a265125eb0a.png) ---
**Author:** ![Andreas\_Hegenberg](https://community.folivora.ai/user_avatar/community.folivora.ai/andreas_hegenberg/32/39221_2.png) [@Andreas\_Hegenberg](https://community.folivora.ai/u/Andreas_Hegenberg)\ **Post date:** [October 12, 2026, 6:48am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/8 "2026-10-12T06:48:26Z")
I have added a small "drag-around-handle" in 6.917. However once re-positioned like that, the items will not adapt to size changes of the menu anymore - you will need to drag them around manually to adjust their position ![image](https://community.folivora.ai/uploads/default/original/3X/5/9/59c2c4ca4934aca54db3d73684734ebd2618fba0.jpeg) ---
**Author:** ![Frank1](https://community.folivora.ai/letter_avatar_proxy/v4/letter/f/a87d85/32.png) [@Frank1](https://community.folivora.ai/u/Frank1)\ **Post date:** [October 12, 2026, 6:55am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/9 "2026-10-12T06:55:04Z")
> [@Andreas\_Hegenberg](#): > > However once re-positioned like that, the items will not adapt to size changes of the menu anymore - you will need to drag them around manually to adjust their position Mm, I don't quite understand what that means, but I'll give it a try as soon as 6.917 is online 🙂 ---
**Author:** ![Frank1](https://community.folivora.ai/letter_avatar_proxy/v4/letter/f/a87d85/32.png) [@Frank1](https://community.folivora.ai/u/Frank1)\ **Post date:** [October 12, 2026, 7:18am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/10 "2026-10-12T07:18:27Z")
I created a test menu, moved the elements around, and resized one of them. The live preview doesn't quite match the floating menu. I'm probably doing something wrong. ![image](https://community.folivora.ai/uploads/default/original/3X/3/6/3619bb28a6e1d0e0d217f50b0396ce08202e656b.jpeg) ---
**Author:** ![Andreas\_Hegenberg](https://community.folivora.ai/user_avatar/community.folivora.ai/andreas_hegenberg/32/39221_2.png) [@Andreas\_Hegenberg](https://community.folivora.ai/u/Andreas_Hegenberg)\ **Post date:** [October 12, 2026, 7:24am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/11 "2026-10-12T07:24:40Z")
Ah, set the menu to manual positioning - I'll change it to do that automatically with the next build: ![image](https://community.folivora.ai/uploads/default/original/3X/9/d/9d81ac46140119977bfb911ccc42d43a3069cb9d.jpeg) ---
**Author:** ![lukasvac](https://community.folivora.ai/user_avatar/community.folivora.ai/lukasvac/32/42711_2.png) [@lukasvac](https://community.folivora.ai/u/lukasvac)\ **Post date:** [October 12, 2026, 7:29am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/12 "2026-10-12T07:29:03Z")
Slightly off-topic: The awkwardness of positioning elements is the main reason I don’t use floating menus and have opted for standard context menus instead. Looking at the canvas with the buttons, though, it would be really helpful if the elements could automatically snap into predefined shapes with regular spacing between their centres (grids, circles, etc.). It would also be great to be able to move the buttons around manually, with BTT displaying various guides and alignment axes to help me line up the elements, much like in graphics editors. See the example from Pixelmator Pro. But I guess that would be a lot of work for a fairly niche use case. 🙂 ![SCR-20261012-issr](https://community.folivora.ai/uploads/default/original/3X/3/d/3d2ac86bfc3b7bd60c9e47ba91055da34b1d866b.png) ---
**Author:** ![Frank1](https://community.folivora.ai/letter_avatar_proxy/v4/letter/f/a87d85/32.png) [@Frank1](https://community.folivora.ai/u/Frank1)\ **Post date:** [October 12, 2026, 7:34am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/13 "2026-10-12T07:34:57Z")
Thanks, it's working now. But how do I make the area in Live View bigger so I can move the elements around? ![image](https://community.folivora.ai/uploads/default/original/3X/5/4/549d1cb5a24db2d74fb4170583698a2d695758b5.jpeg) ---
**Author:** ![Andreas\_Hegenberg](https://community.folivora.ai/user_avatar/community.folivora.ai/andreas_hegenberg/32/39221_2.png) [@Andreas\_Hegenberg](https://community.folivora.ai/u/Andreas_Hegenberg)\ **Post date:** [October 12, 2026, 7:37am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/14 "2026-10-12T07:37:29Z")
@Frank1 increase the menu size: ![image](https://community.folivora.ai/uploads/default/original/3X/8/c/8c2616f1d9914897d73f3b5a7ccc54fccde2abfb.jpeg) ---
**Author:** ![Frank1](https://community.folivora.ai/letter_avatar_proxy/v4/letter/f/a87d85/32.png) [@Frank1](https://community.folivora.ai/u/Frank1)\ **Post date:** [October 12, 2026, 7:44am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/15 "2026-10-12T07:44:46Z")
Yeah, thanks. Floating menus are powerful, but there are so many settings. (That's why they're so powerful, after all.) **Anyway, this new drag-and-drop feature is really cool!** ---
**Author:** ![Andreas\_Hegenberg](https://community.folivora.ai/user_avatar/community.folivora.ai/andreas_hegenberg/32/39221_2.png) [@Andreas\_Hegenberg](https://community.folivora.ai/u/Andreas_Hegenberg)\ **Post date:** [October 12, 2026, 7:47am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/16 "2026-10-12T07:47:40Z")
yep! Next build will allow to resize the menu in the live editor directly. In general I hope I'll be able to make the menus more accessible to "casual" users with the live editor (still needs a few improvements). I think with the new touch screen MacBooks the Floating Menus could become even more powerful. @lukasvac snapping guides etc. should be feasible as well. The issue with absolute positioning like in a graphics editor is that the menus will no longer be responsive (which is e.g. relevant for display in BTT Mobile). However depending on the use case this does not matter much. ---
**Author:** ![lukasvac](https://community.folivora.ai/user_avatar/community.folivora.ai/lukasvac/32/42711_2.png) [@lukasvac](https://community.folivora.ai/u/lukasvac)\ **Post date:** [October 12, 2026, 7:53am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/17 "2026-10-12T07:53:58Z")
The positioning should, of course, remain relative when rendered. Ideally, those guides for precise alignment should only be used when designing floating menus, so that people with OCD can make everything look just right. Imagine having three buttons stacked vertically, with the top one 20 units away from the middle one and the bottom one only 17 units away. A disaster! 😀 ---
**Author:** ![Andreas\_Hegenberg](https://community.folivora.ai/user_avatar/community.folivora.ai/andreas_hegenberg/32/39221_2.png) [@Andreas\_Hegenberg](https://community.folivora.ai/u/Andreas_Hegenberg)\ **Post date:** [October 12, 2026, 7:57am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/18 "2026-10-12T07:57:47Z")
I think with freely draggable items, need to be absolutely positioned (as is now). For the automatic layout modes that allow relative positioning the menu defines the layout algorithm and applies margins etc. so a snapping guide doesn't make much sense there. ---
**Author:** ![Andreas\_Hegenberg](https://community.folivora.ai/user_avatar/community.folivora.ai/andreas_hegenberg/32/39221_2.png) [@Andreas\_Hegenberg](https://community.folivora.ai/u/Andreas_Hegenberg)\ **Post date:** [October 12, 2026, 7:59am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/19 "2026-10-12T07:59:38Z")
6.919 (uploading) should improve a few parts of the absolute positioning and now allows to resize the menu in the live editor by dragging. ---
**Author:** ![Frank1](https://community.folivora.ai/letter_avatar_proxy/v4/letter/f/a87d85/32.png) [@Frank1](https://community.folivora.ai/u/Frank1)\ **Post date:** [October 12, 2026, 8:02am UTC](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993/20 "2026-10-12T08:02:50Z")
My man 🙂 It's great that you're so responsive to good ideas. The question remains: What settings are needed so that a manually positioned floating menu appears in the same location on an external monitor as it does on the internal one (in proportion)? Unfortunately, that's not the case right now. [Next page](https://community.folivora.ai/t/how-do-i-build-this-floating-menu/47993.md?page=2)