Bubble Hack: How to have a vertical menu show upon clicking something with a repeating group cell

Hi all,

I recorded a video that shows how you can have a vertical menu show up within a repeating group cell that’s larger than the cell itself, like shown below. This is one of the techniques that we use in our Canvas app foundation.


Hope you find it useful!



@vlad - a great Bubble hack indeed. When I learned how to do this the hard way, it took far too long :stuck_out_tongue:


Super interesting. Thanks for sharing this @vlad


@vlad Thank you!

Also, a suggestion… Instead of just doing Element Actions > Show, do Element Actions > Animate. This way you can select a nice little animated effect when your focus group appears.


@vlad How can you tricker a pop up in a main window from the focus group that is in a reusable element. I have my reusable element in a repeating group like in your demo?
I can’t figure it out.

@boostsalesgroup - 3 options here:

  1. You could have the popup live within the reuseable element (I know this isn’t what you’re asking but figured I’d include this option because it’s often a good one)
  2. You could set a state on the reuseable element when a menu option is clicked and then, on the page, have a “do when” condition that listens for that state change
  3. You could change the URL of the page (through a parameter) when a menu item is clicked and then, on the page, run an action on page load

Hope this helps!


I was planing to use option 2. but I can’t i don’t see option to listen reusable elements custom state. Is it because It’s in a repeating group? Does the custom state need to be Y/N or can it be any data type?

Hi !

I’m trying to do something quite same, and because a picture often speaks better than words, here is a picture of what I want to do :

So I got a repeating group that displays the event list, and I would like to get the details appear in full width of the repeating group when we click on a event (with the small pointer icon on the event)

I tried to use a reusable element with a focus group, but it is not exactly what I need cause I would like the details to appear always the same way, no matter which event is selected.

Does anyone have an idea ?

Thanks a lot !!!


Hi, @vlad I got this partially working. The submenus are working great. How do I send the data to the focus group? I’m able to set a workflow on the page to send data to the reusable element but not when I click on the reusable element itself…

Thanks for your video!

So I have mine working expect the one simple issue of Toggling the Focus group I set it pretty much like the template form air dev but it wont open or close using the feathericon plugin when i used a regular Icon from bubble it opened but wouldn’t close any idea how to fix?

This video keeps redirecting me to a different page.

How can i view the video?

1 Like

Here you go.


This works well!

But I can’t set the state of an element outside of the focus group when an element inside of the re-usable element FG is clicked.

I’m trying to change the state on the page that the re-usable element is sitting on not of the re-usable element itself.

Video referenced in the first post is not working now… @vlad


1 Like

The new link has been added in the post: Bubble Hack: How to have a vertical menu show upon clicking something with a repeating group cell - #14 by shot

Bubble Hack: How to have a vertical menu that shows up on click within a repeating group cell - YouTube

Hey @vlad

Thank you for the video. I cannot find how to listen the RE state, when I’m searching for this element in a “Do when a condition is true” WF, I cannot display it :

I might miss somethin, thank for your response in advance !

okay for those who asking themselves how to set action on current cell, the trick is to first create a group in the cell, assign the source to current cell, then convert this groupe in a RE. when you ll add this RE in the cell, you can set a source, see more here >> Custom Dropdowns in Cells | Bubble.io Tutorial - YouTube

Hi, I was trying this with an “edit” button to then send the data from the repeating group to a floating group. However, I just can’t figure out how to send the data. I tried custom states and other workflow workarounds. Nothing worked. Anybody who can help?


Also still dunno how to work with the options from the groupfocus tried custom events didn’t work as well… how do i give the workflow to the groupfocus options inside the reusable element?