How to use widgets in Bubble.io: Step-by-Step Guide

 

Drag a Group Focus element onto your page. You can find it in the visual element section of the Bubble editor.

 

Set a reference element for your Group Focus. The reference element will determine where the Group Focus will appear on the page. For example, if you're creating a dropdown menu, you would set the icon that, when clicked, will show the dropdown as the reference element.

 

Adjust the position of the Group Focus relative to the reference element. This is usually done by specifying an offset in pixels. For instance, you might want an offset of -150 pixels to align the Group Focus with the left side of an icon if the icon is your point of reference.

 

Configure the conditions under which the Group Focus will remain visible. Group Focus is typically set to remain visible as long as it is in focus. This means it will stay on the screen until the user clicks elsewhere on the page.

 

Incorporate animations for showing and hiding the Group Focus. You can use actions like "Animate an element" to make the menu appear smoothly when the reference element (like an icon) is clicked. For the dropdown menu example, you can pick the SlideDownIn animation to give a natural feel to the menu appearance.

 

If you're using Group Focus within a repeating group, you'll need a workaround since Bubble doesn't allow for direct referencing of elements inside repeating group cells. Place the Group Focus and its reference element within a Reusable Element and then place that Reusable Element inside the Repeating Group. Configure the Reusable Element's "Type of content" and "Data source" to ensure it's functioning in the context of each repeating group cell.

 

Test your Group Focus by previewing your app. Click the reference element and check if the Group Focus shows up correctly, stays in focus as expected, and responds to clicks outside of it by disappearing.

 

Optimize your design and animations as needed for aesthetics and user experience. You can tweak position offsets, animation durations, and other settings to match the desired look and feel.