Today I will show you how to make a custom dropdown by following this video. Check the video or check my content.

So if you are still with me, I will use a custom reusable component for my custom dropdown, because if you put all your logic in a page, the information can be overwhelming. I like to keep my logic as separated as possible.

How to create the dropdown steps are the following:

1. Create a reusable component

2. Create a dropdown group with text select and a dropdown arrow

3. Create a groupfocus under the group we creted in the second step and create a workflow to toggle the groupfocus visibility.

4. Create a option set in the data tab

5. Create a repeating group in the groupfocus and set the text to the option set display value

6. Create a custom state for the reusable element

We will store the selected dropdown value in the state, so when we use the component the state would be available for us.

7. Finish our custom dropdown by writing a workflow when the repeating group’s text clicked on.

So in the below image you can see we change the custom state value

then we hide the groupfocus.

The final result:

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 *