Table of Contents

Still need help?

Create Nested Dropdowns in Clappia

Help Video

Dependent Drop-downs, also known as Nested Drop-downs, allow you to display dropdown options based on a previous selection. This means each selection in one dropdown controls what appears in the next, helping you guide users through structured inputs.

In Clappia, this can be easily set up using the Dropdown block by defining dependencies between fields.

‍

Use of Nested Drop-downs

Example: Select the Item from a dropdown menu and its corresponding types appear in the next dropdown menu.

Step 1

Add a dropdown block.

Name it as Select Item. Add Shirt,T-Shirt and Shoes to the options.

Click on "Save".

Step 2

Add another dropdown block and name it as Type. Now enter the following in the options field:

Shirt||Formal

Shirt||Casual

Shirt||Hooded

T-Shirt||Round Neck

T-Shirt||V Neck

T-Shirt||with Collar

Shoes||Sports

Shoes||Sneakers

Shoes||Formals

‍

In Dependency fields, set Level 1 dependency to “Select Item”.

This ensures that the selection in the first dropdown will display options related to that option in the second dropdown.

Click on "Save".

Step 3

Add a third dropdown block and name it as Size. Now enter the following in the options field:

Shirt||Formal||S

Shirt||Formal||M

Shirt||Formal||L

Shirt||Casual||S

Shirt||Casual||M

Shirt||Casual||L

Shirt||Hooded||S

Shirt||Hooded||M

Shirt||Hooded||L

T-Shirt||Round Neck||S

T-Shirt||Round Neck||M

T-Shirt||Round Neck||L

T-Shirt||V Neck||S

T-Shirt||V Neck||M

T-Shirt||V Neck||L

T-Shirt||with Collar||S

T-Shirt||with Collar||M

T-Shirt||with Collar||L

Shoes||Sports||8

Shoes||Sports||9

Shoes||Sports||10

Shoes||Sneakers||8

Shoes||Sneakers||9

Shoes||Sneakers||10

Shoes||Formals||8

Shoes||Formals||9

Shoes||Formals||10

In Dependency fields, set Level 1 dependency to “Select Item”.

Click on ‘+ Add another level’.

In Dependency fields, set Level 2 dependency to “Type”.

Click on "Save".

This ensures that the selection in the first dropdown will display the corresponding options related to that option in the second dropdown and then the corresponding options related to those two dropdowns will be shown in the third dropdown.