Picture of a person choosing an icon on a virtual screen. Rapid Developers
/Bubble Development Agency

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

Unlock the power of Bubble.io with our step-by-step guide on incorporating widgets effectively. Elevate your web projects effortlessly!

Explore more
A person working at the laptop. Rapid Developers

Hire an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Explore more

How to use widgets in Bubble.io?

Using widgets, such as Group Focus, in Bubble.io can enhance the interactivity and usability of your web applications. Below is a simple, step-by-step guide on how to use the Group Focus widget in Bubble.io to create engaging UI components like dropdown menus, tooltips, and more.

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

Step 2: 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.

Step 3: 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.

Step 4: 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.

Step 5: 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.

Step 6: 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.

Step 7: 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.

Step 8: 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.

By following these steps, you should be able to implement and use widgets like Group Focus effectively in your Bubble.io applications, creating intuitive and user-friendly interfaces.

Want to Enhance Your Business with Bubble?

Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.

Book a free consultation