Dropdown menu component - a try

@romuald Check out this discussion, as it may have some info around responsive drop downs and stacking that may help.

Thanks @Nate_G. But that doesn’t fix the problem when your design is made of several stages of nested components.

It works in this particular case because you explicitely specify the stacking order. So, in a industrial way of design (=I can take a dropdown component and put it here and it works), it’s not a magic solution.

But your clever way of setting the height gives me some hints to experiment some ideas. Many thanks!

The best way to make a prototype is to have dropdown overlay and dropdown trigger components separated and connect them with “Open Overlay” interaction. To avoid repetitive work you can wrap it into a temporary local component to be used for prototyping purposes

And then you simply overlay this box however you like

Thanks that’s what I did in the file here above. It works, but check it out, you’ll see there is an issue about the overlay positioning, plus the overlay can’t shrink or expand depending on the auto layout, right?

Don’t see any overlay interaction really. All instances have absolutely positioned dropdown menu inside.

Alright, here is what I made

Now I can put this small block on top of any element I want to have normal overlay interaction. It is always on top of everything you have, you can close it by clicking outside, it’s neat!

Nice. Thanks.

So you set up the interaction at the prototype level and not at the component level. It works, but:

• As it is an overlay interaction, it doesn’t take the width of the selector, you’ve to manually adjust it
• And as it is at the prototype level and not the component itself, you’ve to set this up for each prototype.

Right?

I wonder if I’m not asking too much 😁. I think we definitely face some Figma limitations here.

There are two ways to do it.

Pair both the trigger and the overlay into a single component and and you will get auto-width behaviour. There are two serious drawbacks. You will not be able to close the overlay when clicking somewhere else and you would have to constantly fight overlapping issue.

Other way is to decouple trigger and the overlay and use “Open Overlay” interaction which will enable close on click outside and no overlapping issue. However the size of the overlay to be adjusted manually. For me it’s not a big deal. You can have your overlay as a component instance that you can duplicate as many times as you need to have various sizes available.

Setting up is not an issue as you still need to customize your menu for each different dropdown type you have.

Thanks.

Pair both the trigger and the overlay into a single component and and you will get auto-width behaviour. There are two serious drawbacks. You will not be able to close the overlay when clicking somewhere else and you would have to constantly fight overlapping issue.

Yes, that is the left case in my example file.

Other way is to decouple trigger and the overlay and use “Open Overlay” interaction which will enable close on click outside and no overlapping issue. However the size of the overlay to be adjusted manually. For me it’s not a big deal. You can have your overlay as a component instance that you can duplicate as many times as you need to have various sizes available.

Yep, and that’s my second try.

The main issue I see here is it works with a prototype and not with component interactions…more precisely, it works with component interactions, but it’s nearly impossible to define the position of the dropdown.

Thanks again for your messages. I’ll live with these limitations and try to get the most of the overlay solution which seems the most interesting.

Frankly, your second try is being far from ideal. There is definitely better way of doing it, I’d reconsider completely as the result is rather poor

Yes I know.

But you’re right, considering the current Figma capabilities, the best way is to use an overlay and setup the interactions at the prototype level, not on the component itself.

Hi my way of making interactive dropdown components is to use the position absolute option inside the component for the list element and the swap instance option for the ability to dynamically swap lists. So i don’t need overlay option because all the interaction takes place inside my component.

To avoid overlapping elements it is worth changing the Canvas stacking options to “first on top” for the autolayout parent.