Transcript

In this Quick Tip, we're going to learn about how to use the group focus element and when we would use it while building our app. A group focus is the same thing as a group, though it's hidden by default and its position is anchored to an element.

The most popular use case of a group focus is within your main navigation where you can use it to build a custom dropdown. To use a group focus, you add it to the page. You won't have the regular drag and drop controls, instead you set the position of the group focus to the element you want it to pin to.

We are then given offset properties to help control where the group focus will appear. We can then style and design the group focus however we'd like, just like we would any other group. But since it's a group focus, if we navigate away and come back, it automatically hides similar to the popup element.

To show the group focus in run mode, we start a workflow with what we want to trigger its visibility and add a show action. Since it's hidden by default and it disappears when we aren't focused on it, we save the time from having to set up any visibility conditionals or custom states.

Now when we preview this, we can see our group focus show and when we click outside of it, hide.

Experiment creating custom dropdowns, large scale menus, or groups that you want to show on the page that are hidden by default.

That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.