I started to build a new project about truck registering and I will use a dashboard with a sidebar. I decided to use a dropdown menu, so if I will have a lot of menu items then I can group them. This way I can save place, looks cool and in the future I don’t have to worry about create again this behaviour.

On the left side you can see the closed state, and on the right side the opened state. You could say, yeah that’s easy in web development with css, but in bubble you have to think a little bit different. I give you one solution, but there are other ways you can achieve the same.

Let’s see the steps

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu consectetur mauris. Nunc ornare dignissim sagittis.

1. First see the element tree what we are gonna build

Inside the sidebar we have the “Dropdown Menu” group and inside two element, one container for the main menu item with dropdown icon and next to it the submenu container with the submenu items. The dropdown icon contains two arrow, one up and one down, that will be toggled based on the component’s state.

2. Create a custom state on the Dropdown menu group

Create a custom state click on the i icon in the property editor header, then create a state, name it Dropdown Open Sate and give a number type to it with a default value 1. We will increase this number by one each time someone click on the dropdown menu, and determine if the number is even or odd. This will indicate for the submenu container if it should be open or not.

3. Hide the submenu based on the dropdown open state value

This could be seen as complicated, but as soon as you understand the logic once, you will apply it for multiple times in your future projects. So on the property editor click on the conditional tab and create a rule when state number divided by 2 give back 1, which means the state number is odd. See bubble documentation on the “><-modulo-> for more info. This condition says when the state is odd we hide the element.

On the layout tab the collapse when hidden and animate the collapse operation checkbox set to true, so the submenu container won’t occupy space when is hidden and it will be animated.

4. Create an event, means create a workflow on the menu item with dropdown.

Click on the element tree on the Menu item with dropdown and the property editor Appearance tab click the Add Workflow (Edit Workflow).

In the workflow editor the first step when someone click on the menu item, that we will increase the state number by 1. The second step is we toggle the up icon visibility from false to true, and the third step we toggle the down icon visibility from true to false. Or vice versa.

The toggle changes the visibility from the current true or false to the opposite. So this way we don’t have to write two step with Show or Hide.

That’s it, it wasn’t so hard, with only four steps we achieved in Bubble a simple dropdown menu that is elegant. Cheers. 🙂

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 *