Hamburger Menu Nested Items Broken In Prototype

In my hamburger menu, I have one list item that has a couple of different options nested inside of it; and I have this hamburger menu set as a component with different variants for each respective submenu item appearing.

When I try out the hamburger menu component in a standalone prototype, the menu options expand as they should (correct part of screenshot). However, when I place that component into my overall navigation bar component, it appears to break when I expand a submenu and every list item automatically has reduced padding and some gaps form as well (broken part of screenshot).

Has anyone else run into this problem? Could this just be a glitch or am I doing something wrong in terms of how the hamburger menu component is constructed?

Hi there,

Thanks for reaching out.

If I understand correctly, this could be a feature limitation where changing variants or swapping instances in nested instances doesn’t update the sizes according to the new selections.

But there’s a workaround for this. You can enable auto layout on each variant of your components, which should allow the nested instances to resize correctly.

If you’re okay with sharing the file link, I may be able to take a look directly. Could you share your file link please?


Hi y_toku,

Enabling auto layout for each variant in the component solved the issue, thank you for your help!


1 Like

Hi Marc,

Glad that you solved! Thanks for sharing!