Nested interactive expandable components

Ask the community
1

Hi,

I’m wondering if anyone could guide me on how to make nested expandable components work.

I’m trying to create an interactive mobile navigation bar. I have main categories, subcategories, and then items.

Example:

  • Category
    • Subcategory
      • Item
      • Item
    • Subcategory
      • Item
      • Item
  • Category
    • Subcategory
      • Item
      • Item
    • Subcategory
      • Item
      • Item

I want only to show the main categories, and if you click on one category, the subcategories appear, and everything below is pushed down to make space for it. Then the same happens if you expand each subcategory to show the items.

I have created a component for each subcategory that is expandable to show and hide the items. Then I placed that component for the subcategories inside a similar component for each category.

However, it only works for the categories, not the subcategories. If I try to expand each subcategory to show the items under it, everything below it doesn’t move down to make space for the items.

But if I add the subcategory component directly to the main frame, then it works.

Is it not possible to add an expandable component inside another component that is also expandable?

It is hard to explain by text so I think it is easier to understand the use case by looking at this example:

Prototype:

Does anyone know how to make this work?

Thank you in advance!

2

Add auto layout to the variants of the “Subcategory” component.

3

That did the trick! Thank you so much.