How to create a dropdown header?


I really like the design of the dropdown header from Any ideas how I could replicate it on bubble?
I tried to do it the standard way with group focus, but you can’t open it just by hovering text. The menu can be show only by clicking on an element. Tried to do it with custom states, but you can’t change the state when choosing the ‘when this element is hovered…’ option.

Also, I had to make the group really long, just to make sure it reaches from left side to the right side of the screen even with bigger monitors. But then it’s hard to figure out how to position elements under icons or text etc…

I’m open to including self written code to my page, I’m just not educated enough to write the code myself.

Any ideas?


Hey @artplatform,

You can use a group focus, then you have to do the following. Yes, it’s a very hacky and annoying way to do it but…

Open up a conditional on any element on the page then for the dynamic expression do: Group Focus is hovered. Once you have that right click then copy the expression. After that, in workflows > create a new event that is “Do only when” change it from only once to every time then in the “When” part of the workflow paste the expression. The action of that workflow would be to show the group focus.

Let me know if you need any clarification! :blush:


It works! Nice hack to copy the expressions from other elements, will use it in the future also. :slight_smile:


This topic was automatically closed after 70 days. New replies are no longer allowed.