# How to create dynamic dropdown menus in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
DYNAMIC DROPDOWN PATTERNS:

1. SIMPLE DATABASE DROPDOWN
   Dropdown element
   Type of choices: Category
   Choices source: Search for Categories (sorted by name)
   Option caption: Current option's name

2. DEPENDENT/CASCADING DROPDOWNS
   Dropdown 1 (Category):
     Type: Category
     Source: Search for Categories
   Dropdown 2 (Subcategory):
     Type: Subcategory
     Source: Search for Subcategories (parent_category = Dropdown 1's value)
   Dropdown 3 (Product):
     Type: Product
     Source: Search for Products (subcategory = Dropdown 2's value)

3. OPTION SET DROPDOWN (faster)
   Dropdown element
   Type of choices: Country (Option Set)
   Choices source: All Countries
   Option caption: Current option's Display

4. RESET WORKFLOW
   When Dropdown Category's value is changed:
     → Reset inputs: Dropdown Subcategory
     → Reset inputs: Dropdown Product

5. THREE-LEVEL EXAMPLE (Country → State → City)
   Country dropdown → filters State dropdown
   State dropdown → filters City dropdown
   Changing Country → resets State and City
```

## Common mistakes

- **Not resetting child dropdowns when parent changes** — The child dropdown retains its old selection which may not be valid for the new parent, leading to incorrect form submissions. Fix: Add a workflow on parent value change that resets all dependent child dropdowns.
- **Using database searches for static data** — Every page load queries the database, consuming workload units for data that never changes. Fix: Use Option Sets for static lists like countries, statuses, and categories.
- **Not handling the 'no selection' state** — If no parent is selected, the child dropdown may show all items or an error. Fix: 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.

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-dynamic-dropdown-menus-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-dynamic-dropdown-menus-in-bubble