A group focus is a container that appears next to another element and stays visible only while it's in focus. As soon as the user clicks anywhere outside of it, the group focus automatically hides itself, no workflow needed.

Because of this behavior, group focus elements are ideal for lightweight, temporary UI that appears in response to a specific interaction and disappears again once the user's attention moves elsewhere.

Common uses

Two things set a group focus apart from other containers:

It's positioned relative to a reference element. A group focus is always anchored to another element on the page, called its reference element. It appears next to that element based on an offset you define, and its position follows the reference element as the layout changes.

It hides itself automatically. Once a group focus is visible, it stays open until the user clicks somewhere outside of it. At that point, it hides without any action needed. You don't have to build a workflow to close it, and you don't need to track its state.

Together, these behaviors make the group focus a lightweight way to add temporary, contextual UI without wiring up separate open and close logic.

Group focus elements aren't visible by default. To show one, use the Show an element action, or use Animate an element for a smoother transition.

For example, clicking a menu icon can trigger Animate an element with a slide-in animation to reveal the group focus. As soon as the user clicks anywhere outside the group focus, it disappears on its own.

You don't need a workflow to hide it. That said, if you want to hide it explicitly, Hide an element still works.

The group focus's position is controlled by two settings:

Because the group focus follows the reference element, it stays properly positioned as the page scrolls or the layout adjusts.

Like other containers, a group focus can hold data.

Set the Type of content and Data source on the group focus, and its child elements can reference the data using Parent group's expressions.

This is useful when a group focus needs to show information tied to a specific record, such as a menu showing options for a particular user or a tooltip displaying details about a specific product.

Repeating groups pose a challenge for group focus elements. Because a repeating group contains multiple cells, Bubble can't tell which cell's element to use as the reference. This means you can't directly reference an element inside a cell as the group focus's anchor.

The workaround is to place both the reference element and the group focus inside a reusable element, then place that reusable element in the repeating group.

How it works:

This makes each instance of the reusable element self-contained, with its own reference element and group focus tied to the specific record in that cell.

Group focus elements can be styled like any other container. They support background colors, borders, border radius, shadows, and opacity. A subtle shadow or border usually works well since group focus elements sit above the surrounding page content.

Using shared styles or style variables keeps group focus elements consistent with the rest of your app's design.

Article series: Styles