Navigation bar help with sub-menu

So I am trying to add a sub-menu to my navigation bar (which is a reusable element).

Here is a dumbed down version of my nav bar:

When someone clicks on that down arrow, I want a sub-menu to pop up:

I know I can achieve this by having the sub-menu not be a child of the nav bar but that means I have to individually add the sub-menu to every single page which is not efficient design.

The issue arises from the fact that my nav bar is 70px tall but obviously the sub-menu will partially exist outside of the perimeter. I have set it up in the editor as above and when I go to preview it, I get this strange behaviour of the just the background of the nav bar shrinking to roughly 1/3 the original height but all the buttons stay where they’re supposed to:

When I click on the down arrow to reveal the sub-menu, the nav bar returns to the way it is supposed to look.

I originally assumed this odd behaviour was a result of the fact that bubble doesn’t like the element outside of the bounds of the nav bar but I played with the y coordinate of the sub-menu and found that it can be outside of the bounds but not past a certain, seemingly arbitrary threshold:

When that dimension “x” is 9px or less, everything works fine, but when it is 10px or greater, it produces the weird behaviour.

I am not married to doing this in the manner in which I have described. If someone has a better way of achieving the sub-menu feature of a reusable element nav bar then I am all ears.

Thanks in advance

Hi Paul.
Have you tried using a regular group instead of a groupfocus for this? This should give the effect needed.

HI mmahrif. Thanks for your thought. I should have been more specific in my original post. That little box (“Admin, Account, logout”) is a regular group currently

Hi Mmahrif.
So I am dumb. I just tried it with a focus group (obviously you assumed I would have used that as that is the obvious thing to try but I didn’t) and it works perfectly.
Brain fart.
Thanks for your help.

1 Like

Haha no worries! I did assume that it was a focus group. Glad that it worked out.
Do mark your response as a solution if that is all!

FYI this is how a menu with a group (instead of a focus group) would look like, you can hide the unused menus if needed.

Thanks for that. Quick question: what do you see as the benefit of using a regular group instead of a focus group?

Anytime! I prefer groups as they are just easier to work with. Some bug currently causes it to always move away from the focus element.

Groups focus works great when using an edit icon in a group but for header menus it’s just plain annoying if you have multiple dropdowns. I did notice that @jameore of buildcamp use it in one of his menus so that was a yes for me to continue doing so.

Hope this helps!

1 Like

Got it thanks. Makes sense.

Last question. In the gif showing the menu you built, how do you pin regular groups to elements? Obviously group focus does that but not sure how its done with regular groups. Are you just putting groups inside of groups? Like this:
Where all rectangles are groups and then the submenu item group is set to collapse when hidden?

Yep. Sort of. It’s all math here. If I want the header at max width of 960px I have the option to set 4 groups with a min width of 240px with a right margin of 20px.
That is 220px + 20px times 4.

So the submenu groups have the same min width as the top menu item group (actually a text element of the same width).

So when I don’t want to show a group I just hide it without collapsing it. This way it won’t cause the remaining groups to fill the empty space that would otherwise be created.

1 Like

Yup. Handling it with responsiveness should have been my other guess.

Thanks for the explanation. Much appreciated.

1 Like

I would like to know how you did this please. I am currently creating a reusable element menu and im already having trouble getting it to work

What specifically are you having problems with? Please send some screenshots