It is very common to see a user icon in the top right corner and after click on it you can see a user related menu. Today I will show how can you achieve this in Bubble. For simplicity I have just put one button into the menu, but you can add as many as you wish.

Let’s do the following steps

Expand your knowledge and network at our inspiring events and workshops. Join industry professionals for learning and collaboration.

1. Create a user icon using the icon element from the visual elements

2. Create a Group Focus from Container elements and in the property editor give the reference element, which is the user icon.

3. Create an event for user icon. See the details below.

When using a Group Focus element, the group is invisible for default state and only disappear when you click outside of the group. This is good for us, but we also want to hide the Menu when someone click again on the user icon. So in order to achieve that we need to create a custom state on the user icon.

Create a state and call it: User Menu Visible with yes/no value, the default is no.

After that we need three events to define:


I am available for bubble projects, contact me to make your next application together!


Leave a Reply

Your email address will not be published. Required fields are marked *