If you're looking for a way to create custom dropdowns in your main navigation in Bubble.io, you may want to consider using a group focus. This hidden group is anchored to another element, making it a versatile and useful tool for building navigation menus and other interactive features.
A group focus is similar to a group in that it contains other elements, but it is hidden by default and its position is anchored to another element. This means that when the element it is anchored to is clicked or hovered over, the group focus will appear in a customizable location.
One of the most common uses for a group focus is in main navigation menus. By setting the position of the group focus to the navigation item that it should be associated with, you can create a dropdown menu that appears when the item is hovered over.
To control the appearance of the group focus, you can use offset properties to adjust its position and size. This allows you to create custom dropdowns that match your website's style and branding.
If you want to display a custom dropdown or info popup in a repeating group for each cell, you'll need to use a slight workaround. Instead of placing the group focus directly in the repeating group, you can create a reusable element that will trigger the group focus.
To do this, simply create a reusable element that contains the group focus and any other elements you want to display in the dropdown. Then, place the reusable element in the repeating group and fill in the data source if necessary. When the reusable element is clicked or hovered over, the group focus will appear in the correct location.
Group focuses can be used for more than just dropdown menus. They can also be used to create interactive features like info popups and tooltips. By anchoring the group focus to a specific element, you can create an interactive experience that provides more information or context to your users.
Group focuses are a versatile and useful tool for creating custom navigation menus, info popups, and other interactive features on your website. By understanding how to use them, you can create a more engaging and user-friendly experience for your visitors.
See how the Nymbl team thinks.
Get a high level overview of the no code / low code space and why it’s so powerful. Learn what no code / low code is, what it’s good for, and where it’s going next.
Check out our collection of common business use cases for no code and low code tools to get some inspiration for your next project.
At Nymbl, we study as much as we build. Explore our library of approachable guides and research on the most popular low code and no code tools.