Make the dropdown/navigation menu width expand to fit contents

Trying to use a dropdown menu as an action menu alongside a text field.
Works fine, expect that the width of the menu, when displayed, is only as wide as the button element that triggered it.
Seems to be the same for navigation elements too. Make it small, turns into a hamburger, resulting menu is cropped to the same width as the icon - all the text is lost.
An option to choose if the menu should crop to the size of the component or the contents would be great.

cropped_menu

1 Like

Hey @dcartlidge, great point. As a workaround in the meantime, I tested few options (curious if we could use two dropdown type components, where one only functions as the small show button and the other functions as the wide options) and it seems like it might be kind of possible with a button that triggers a hidden-from-the-canvas dropdown to open and show its options.

I've attached a GIF and an export of my app so you can import it and poke around to see if this is helpful at all.

Basically, the small show button triggers some event handlers on click (one to hide/show the dropdown with the wide options, one to focus on the dropdown to open the options and one to set a temporary state variable to a varying color, just to make it look more like a button that can be clicked and "unclicked").

Let me know if something like this could be helpful at all :sweat_smile:


double-dropdown.gif double-20dropdown-20width.json

Thanks for that idea @victoria , I'd not thought of doing it this way.
It's not quite meeting my use case for now, but it's a neat technique that I'll consider for the future.

In the end I've gone with a reshuffle of my UI so that the actions dropdown menu is below the main header and is wide enough now to show all the options. A little clunky but functional.

Darn, well glad to hear you were able to get moving anyway!

Good callout as well on the ideal behavior here :+1:

1 Like