Interactive component dropdown

I created an interactive dropdown component with different states: default, hover, clicked and disabled.
The “clicked” state displays a list of items that can be clicked to trigger actions (e.g. load a frame or navigate to a page).
When I use the component in my prototype, I customize the labels of the list items by overriding the text.

Capture d’écran 2022-07-26 à 14.54.28

Problem: when I launch the prototype, the texts I defined in the instance do not appear but the default texts of the component.

Did I miss a step?

To preserve overrides, you need to add a hidden list of items to each of the variants.

Thanks for your answer!
Here’s what I currently get:

Not sure I get how having a hidden list of items can preserve overrides :wink:

If your variant differs in structure (missing layers or new ones added) from another variant, and also has different names, then this violates the override preserve.

So add a hidden list of items to your variants (Default, Hover and Disabled).

1 Like

It worked perfectly! Thanks for your help :pray:

From this screenshot it is impossible to understand the structure of the collapsed variant and also see the full structure of the expanded variant. Could you share a link to the example file?

Here you go Yury: https://www.figma.com/file/Uh6LCVJH2cqWaj6Jzvb98q/For-Yury?type=design&node-id=0%3A1&mode=design&t=gSQP1PuqAnS344KQ-1

The structure of your variants is different, so overrides are lost. As described in the topic.
different-structure
Copy the “Menu” layer from the expanded variant and paste it into the collapsed variant and hide it.