Skip to main content

I’m trying to resize all items in a submenu based on the size of the largest text label.


I’ve created a submenu component by using variants for each menu item type (hover state/active item etc.).


I want my menu item labels and their background shading to all resize together to fit the size of the largest text block.


Screenshot 2021-06-29 at 15.40.05


I’m relatively new to auto-layout and resizing and have no idea whether this needs to be done to the Menu Item component (the component that contains all my variants), the Individual menu items within that component, or from the Submenu component.


For example, I tried editing the alignment and padding for one of the menu item variants, however this will only expand that individual item and not the rest of the items in the submenu.


Screenshot 2021-06-29 at 15.44.01


Is anyone able to help?

Hi @anon74565796! Select all “Menu item” layers in the “Submenu” component and set them to “Fill container” horizontally.

Hi @tank666, thanks for looking into it and your reply.


For some reason it isn’t working (it does seem like the logical solution though!).


I’ve selected all instances of the ‘Menu item’ component within the ‘Submenu’ component, and set these to fill container horizontally in the resizing settings, but the submenu doesn’t expand to fit the widest text (Active item)

Screenshot 2021-06-30 at 09.25.14

The “Default” layer, which is in the “Submenu” component, should have “Hug contents” set.

Hey @tank666, when I set the Default layer to hug contents, the Menu item instances automatically shift to Fixed width. So you can’t have both the Menu items and the parent Default layer set to fill container.


I’ve played around with a few different configurations of this.


I’m not sure if it’s potentially something to do with the Text at the lowest level, but I don’t think so? Each of these text items are set to Auto-width, but they don’t seem to expand the background elements to suit. (This is both in the ‘Menu item’ master component’ and the ‘Submenu’ component.)

Could you share a link to the file?

@tank666 here wo go. thanks again for looking into this 🙂

Figma – 30 Jun 21

Thanks, I looked at your file. You need to add Auto Layout to the Menu item variants: Selected, Active, Hover, Default. Then set the “Hug contents” of the Default variant of the Submenu component.


Design file:

Figma – 30 Jun 21

Hey @tank666 thank you so much, that did it!


I needed to:




  • Add Auto Layout to the Menu item variants




  • Add hug contents to the Menu item master component




  • Add hug contents to the Submenu component




I thought I’d tried all the variations, but obviously not. You’ve saved me a massive amount of time, thanks again.


Screenshot 2021-06-30 at 12.03.19

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings