Building a Custom Dropdowns in Bubble
Learn how to create a custom dropdown in Bubble.io without any code in this tutorial video. See how you can include elements like profile images and contact names for a seamless user experience.
Create custom dropdowns with images: Learn how to build dropdown menus featuring contact names and profile pictures in Bubble.
Master group focus and repeating groups: Discover techniques for implementing group focus and scrollable repeating groups in your Bubble app.
Elevate your forms with custom dropdowns: Transform your Bubble forms by incorporating advanced dropdown functionality with images and text.
Creating a Custom Dropdown in Bubble
For when the default browser dropdown is not enough, in this Bubble tutorial video, I'm going to show you how we can create a custom dropdown that includes other elements. We'll be using this list of contacts and picking out the contact name and the profile image of the contact. So let's go in here and go into the page.
Setting Up the Group Container
The first thing I'm going to do is add in a group. Let's add it in here. And I want this to say let's be 320. And I'm going to give it a border just so it stands out. Okay. And so this group is going to contain a contact because ultimately I'm going to be referring to this group to know which contact has been selected. So I'll say type contact.
Creating the Group Focus Element
Now I'm going to add a group focus because this is going to be the bit that pops out, pops over the rest of the page content when it's clicked. So group focus. And I'm not paying too much attention to layout, but we will anchor it to the contact. And let's also give this a bit of a border. Yep, just so it stands out.
Setting Up the Toggle Action
Let's begin. So when I click on here, I would like it to show, in fact, we will say toggle the group focus. Let's preview that. So click and it's there. If I click anywhere else on the page, it disappears. If I click back on the group because it's toggle, it also disappears.
Creating the Repeating Group
Now this is a little bit of a bug with Bubble. It sometimes forgets where it's meant to be anchored. I don't think it actually matters. You can just proceed without having to fit that each time. So we'll say repeating group in here. And this is going to be a repeating group of contacts. And I'll say do a search for all contacts and I won't limit the number of rows, but I am going to limit the height because I want it to basically scroll internally. So let's say 200, get rid of them in height. 200 is way too low. Let's say 480. Something like that. Well, yeah, we'll get it working.
Adding Profile Images
I'm going to copy what I've got here for the image, which I've done a previous video on because it's basically taking the profile picture. Yeah, it's taking the profile picture or it's using the alphabet image. So the alphabet image is this element here. Do go and check out that video if you're unsure what that does, but I'm going to copy that into there and then copy this also into there. Link it back up with the new alphabet image that it's set next to. Yeah. Make sure that this is still current self's contact. Brilliant. I'm just going to check that that works. Yeah. There we go. And it's scrolling nicely, as I was hoping.
Adding Text Labels
So let's also add in a text label. So we'll say current self's contacts first name, and then I'm going to change this all into a row and put the image first. Let's test that. Perfect.
Improving User Experience
Now there's loads of other stuff that I could do here to improve the UX. Obviously, it's a bit ugly now, but I can add hover effects so that it's clear when the cursor's over a particular cell. I've got videos covering that too in a repeating group and in a table.
Setting Up Click Actions
But for now, I just want to be able to say if this is clicked, we want to set not the repeating group. Basically, if anything in this cell is clicked, so I'm going to select everything that's in here and group it together so that I can run a single action workflow based on if anything in that cell is clicked. And so we will simply say display data in... Okay, now we've got two groups called contact. So I'll call this one cell and then where it's attached. I call this one selected. So we want to display data in the selected and the one we want to display in the selected is the current group's contact.
Finalizing the Dropdown Functionality
Okay, now I'm actually going to copy this and you could turn this into a reusable element even because this is how I want my contacts to be displayed throughout my app. Let's just hide this. Oh, Bubble needs to sort that out. I'm going to paste that into there because that should now mean that if I select Wanda, Wanda now populates that group and that group has another group in it, which has got the image and the text label which say show data from parent groups. So show the image and show the text.
Adding Final Touches
So I'd say there's one final step to add here, which is that when the cell in the drop down is clicked, we actually just want to hide the float focus group focus. And then I can go in and change it and it will work. Now if this is part of a form and I want to know which contact is selected, I can just refer to the data that lives in here because I'm replacing that. I'm overwriting that every time a new cell is clicked in the makeshift drop down in that repeating group.
Conclusion
So there you go. That's how you can create your own custom drop down in Bubble, which includes images, text, and how you can incorporate that into a larger form.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.