Create dynamic dropdowns in Bubble by setting a Dropdown element's Choices source to a database search or Option Set. For cascading/dependent dropdowns (e.g., country → city), filter the second dropdown's data source based on the first dropdown's selected value. This creates a connected selection experience where each choice narrows subsequent options.
Create Dynamic Dropdown Menus in Bubble
This tutorial covers populating dropdowns dynamically from your database and creating dependent/cascading dropdowns where one selection filters the options in the next. This is essential for forms with related categories, location selectors, and product filters.
Prerequisites
- A Bubble account with an active app
- Data Types or Option Sets with hierarchical data
- Basic understanding of Bubble elements and data sources
Step-by-step guide
Create a Basic Dynamic Dropdown
Create a Basic Dynamic Dropdown
Add a Dropdown element to your page. In the Property Editor, set Type of choices to your Data Type (e.g., Category). Set Choices source to 'Do a Search for Categories'. Set Option caption to 'Current option's name'. The dropdown now populates automatically from your database.
Expected result: A dropdown showing all categories from the database.
Create Dependent Dropdowns
Create Dependent Dropdowns
Add a second Dropdown for the subcategory. Set Type of choices to Subcategory. Set Choices source to 'Do a Search for Subcategories' with constraint: parent_category = Dropdown Category's value. Now when the user selects a category, the subcategory dropdown filters to only show matching subcategories.
Pro tip: Add 'Ignore empty constraints' unchecked to show nothing when no parent is selected, preventing the subcategory dropdown from showing all items before a category is chosen.
Expected result: Selecting a category filters the subcategory dropdown to show only relevant options.
Reset Dependent Dropdowns on Parent Change
Reset Dependent Dropdowns on Parent Change
When the parent dropdown value changes, the child dropdown keeps its previous selection even if it no longer matches. Add a workflow: 'When Dropdown Category's value is changed' → 'Element Actions → Reset inputs' targeting the subcategory dropdown. This clears the stale selection when the parent changes.
Expected result: Changing the parent dropdown clears the child dropdown selection.
Use Option Sets for Static Dropdown Data
Use Option Sets for Static Dropdown Data
For data that does not change (countries, statuses, priorities), use Option Sets instead of Data Types. Go to Data tab → Option Sets → create 'Country' with options. Set the dropdown's Type of choices to the Option Set. Option Sets load instantly from cache with zero workload units, making them much faster than database searches.
Expected result: Static dropdowns load instantly from Option Sets.
Add a Search/Filter Input to Dropdown
Add a Search/Filter Input to Dropdown
For long dropdown lists, the built-in Dropdown element has limited search. Use the Searchbox element instead — it provides type-ahead filtering. Set Type to your Data Type, search fields to 'name', and it auto-filters as the user types. Alternatively, use the 'Bubble Select' or 'Air Selectize' plugin for enhanced dropdown functionality.
Expected result: Users can search within long dropdown lists to find options quickly.
Complete working example
1DYNAMIC DROPDOWN PATTERNS:231. SIMPLE DATABASE DROPDOWN4 Dropdown element5 Type of choices: Category6 Choices source: Search for Categories (sorted by name)7 Option caption: Current option's name892. DEPENDENT/CASCADING DROPDOWNS10 Dropdown 1 (Category):11 Type: Category12 Source: Search for Categories13 Dropdown 2 (Subcategory):14 Type: Subcategory15 Source: Search for Subcategories (parent_category = Dropdown 1's value)16 Dropdown 3 (Product):17 Type: Product18 Source: Search for Products (subcategory = Dropdown 2's value)19203. OPTION SET DROPDOWN (faster)21 Dropdown element22 Type of choices: Country (Option Set)23 Choices source: All Countries24 Option caption: Current option's Display25264. RESET WORKFLOW27 When Dropdown Category's value is changed:28 → Reset inputs: Dropdown Subcategory29 → Reset inputs: Dropdown Product30315. THREE-LEVEL EXAMPLE (Country → State → City)32 Country dropdown → filters State dropdown33 State dropdown → filters City dropdown34 Changing Country → resets State and CityCommon mistakes when creating dynamic dropdown menus in Bubble.io: Step-by-Step Guide
Why it's a problem: Not resetting child dropdowns when parent changes
How to avoid: Add a workflow on parent value change that resets all dependent child dropdowns.
Why it's a problem: Using database searches for static data
How to avoid: Use Option Sets for static lists like countries, statuses, and categories.
Why it's a problem: Not handling the 'no selection' state
How to avoid: Add conditional visibility to hide child dropdowns until a parent is selected. Or use an empty constraint that returns no results.
Best practices
- Use Option Sets for static dropdown data to avoid database queries.
- Reset child dropdowns when parent selection changes.
- Hide dependent dropdowns until their parent has a selection.
- Add a 'Choose...' placeholder text as the default option.
- Sort dropdown options alphabetically or by a sort_order field.
- For long lists (50+ items), use a Searchbox element instead of a Dropdown for better UX.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need cascading dropdowns in Bubble.io: Category → Subcategory → Product. When I select a category, the subcategory dropdown should filter. When I select subcategory, products filter. How do I set up the data sources and reset workflows?
Create three dependent dropdowns: Category, Subcategory (filtered by selected category), and Product (filtered by selected subcategory). Add workflows to reset child dropdowns when parents change.
Frequently asked questions
Can I have more than two levels of dependent dropdowns?
Yes. The pattern extends to any number of levels. Each dropdown filters based on the previous one's selection. Three levels (category → sub → product) is common; more than four becomes unwieldy for users.
How do I set a default selection on a dropdown?
Set the 'Default value' property on the Dropdown element to a specific item (e.g., the first search result or a specific Option Set value).
Can I allow multiple selections in a dropdown?
Bubble's native Dropdown is single-select. For multi-select, use a Searchbox with 'Allow multiple selections' or a plugin like 'Multi-Dropdown'.
How do I style dropdown menus?
Bubble's native Dropdown has limited styling. For custom-styled dropdowns, use the Dropdown Container pattern (a Group that shows/hides a styled list on click) or a styling plugin.
Should I use database searches or Option Sets for dependent dropdowns?
If the data changes based on user input, use database searches. If categories are fixed and maintained by developers, use Option Sets with parent-child attributes. For complex dependent data patterns, RapidDev can design the optimal approach.
Can I populate dropdowns from an external API?
Yes. Use the API Connector to fetch options from an external service. Set the dropdown's data source to 'Get data from an external API' and map the response fields.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation