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

‍

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.

Name it as Select Item. Add Shirt,T-Shirt and Shoes in 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 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.

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 the level 1 dependency field select the first dropdown, i.e, select the 'Select Item' dropdown.

Click on ‘Add another level’.

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

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:

In Mobile app view:

Scenario 2

Dropdown 1 - T-Shirt

Dropdown 2 - With Collar

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

In Webapp view:

In Mobile app view:

‍

Scenario 3

Dropdown 1 - Shoes

Dropdown 2 - Sports

Dropdown - 8, 9, 10

In Webapp view:

‍

In Mobile app view:

‍