Table of Content
Still need help?
Request support
Request Support
HELP
 / 
 / 
Deep Dive
 / 

Build Nested Dropdowns/ Multi-level Dropdowns

Help Video

What if you can provide 'Nested Dropdowns' or 'Dependent Dropdowns' in your app like the one in the picture below

In Clappia, it is easily possible

Nested Dropdowns

This feature gives you the option to have conditional dropdowns, i.e. each option has its own dropdowns. There is no need to use many features. Just by using the dropdown block and adding suitable dependency will work.

Let us understand the use of Nested Dropdowns by an example

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

Step 1

Add a dropdown block.

how to create dropdowns

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

how to create dropdowns

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

how to create dropdowns

In the level 1 dependency field select the first dropdown, i.e, select the 'Select Item' dropdown.

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

how to create dropdowns

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

how to create dropdowns

In the level 1 dependency field select the first dropdown, i.e, select the 'Select Item' dropdown.

how to create dropdowns

Click on ‘Add another level’.

how to create dropdowns

In the level 2 dependency field select the second dropdown, i.e, select the 'Type' dropdown.

how to create dropdowns

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.


This is how the nested dropdown in the app works

Scenario 1

Dropdown 1 - Shirt

Dropdown 2 - Formal

Dropdown - S, M, L (Small, Medium, Large)


In Webapp view:

how to create dropdowns
how to create dropdowns
how to create dropdowns


In Mobile app view:

how to create dropdowns
Scenario 2

Dropdown 1 - T-Shirt

Dropdown 2 - With Collar

Dropdown - S, M, L (Small, Medium, Large)


In Webapp view:

how to create dropdowns
how to create dropdowns
how to create dropdowns


In Mobile app view:

how to create dropdowns

Scenario 3

Dropdown 1 - Shoes

Dropdown 2 - Sports

Dropdown - 8, 9, 10


In Webapp view:

how to create dropdowns
how to create dropdowns
how to create dropdowns


In Mobile app view:

how to create dropdowns
Build Nested Dropdowns/ Multi-level Dropdowns

FAQs
Try our free plan
It will answer many more questions within just 15 minutes.