Submenu Auto-layout and resizing advice

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)

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 🙂

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:

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