Skip to main content
Question

Nested interactive expandable components

  • December 1, 2022
  • 2 replies
  • 1325 views

SigrunDis

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:

Figma – 1 Dec 22

Does anyone know how to make this work?

Thank you in advance!

tank666
  • December 1, 2022

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


SigrunDis

That did the trick! Thank you so much.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings