Group focus

This section covers the group type Group Focus. This group will remain visible for as long as it is in focus, typically used for dropdown menus

The Group Focus has two main characteristics:

• It will remain visible only for as long as it is in focus. Focus in this context means until you click anywhere else on the page.

• They are displayed relative to another element by a set number of pixels

These features gives it several typical use cases:

• Contextual menus

• Floating Action Buttons

• Dropdown Menus

• Tooltips

Group Focus is useful for setting up dropdown menus

In the example above you can see a typical use case for the group focus. The white rectangle with the shadow is the Group Focus, and we are using the Animate an element action when the icon is clicked to give it a smooth transition. As soon as a click happens outside of the Group Focus it's automatically hidden without any actions needed.

Taking a look in the Bubble editor, we can note a few things:

• The Reference element is set to the icon. This means that the Group Focus will be displayed relative to the icon.

• We have given it an offset of -150 pixels to push it to the left side of the icon. This is simply an aesthetic choice

• When the icon is clicked, the Animate an element action displays. Notice that no action is needed to hide it again.

We chose the SlideDownIn animation to display the dropdown menu, and give it a slightly shorter duration than the default. Both of these options are also purely aesthetic.

Using Group Focus in Repeating Groups

Repeating Groups behave a bit differently than other group types because the contain multiple cells. As a consequence, you can't directly reference an element inside of a Repeating Group cell, since Bubble can't know which cell you are trying to reference.

This creates a challenge when using the Group Focus, because it depends on being able to reference another element to know where to display it. There's a way to get around this however: if you place the Group Focus and the element it should reference inside of a Reusable Element, and then place that Reusable Element inside of the Repeating Group, it will work.

This is useful in scenarios where you want to place a contextual menu in a Repeating Group.

In the example above, both the clickable icon and the Group Focus is contained within a Reusable Element. This Reusable Element is then duplicated for each cell of the Repeating Group. To make sure that we can apply actions to the dropdown menu that are relevant to the user in the current row, make sure to set the Reusable Element's Type of content to User:

This setting is set when you edit the Reusable Element and open the Property Editor for the Reusable Element itself.

Then, when selecting the Reusable Element you have placed in the Repeating Group, you set the Data Source to the Current Cell's User:

By setting the Data Source of the Reusable Element to the content of the current cell, we are passing data from that specific cell into the Reusable Element, where you can bind it to actions in the dropdown menu.

Other ways to learn

Core reference: group focus settings

In the core reference section, you'll find all the settings associated with floating groups.

Reference: Group focus

Video lessons

• How to use the Group focus element