Hi everyone,
I’ve added the Navigation menu component to one of my projects. On mobile, this menu can be toggled open/closed. It comes with a button to open and close it, but I want to close it on a menu item click or a backdrop click (or tap), for example.
There doesn’t seem to be any variable bound to the component that I could use in a workflow to do that. Am I missing something or is the component missing something? 
Hi Joyce, thanks for the reply!
I’m already using the nav bar for an actual nav bar 
I need a menu, or tabs in addition to the nav bar.
The navigation menu fits nicely and has just about the desired properties. I guess then the solution would be to create one from scratch?
Maybe you could create a state on the navigation menu? I’m not sure 
Hm. That could be the start of an idea yes!
The issue however is that there is a button to toggle the menu open and closed. So if I use another variable or logic to hide the menu container, while from the button’s perspective the menu is still in an open state (although it is hidden), clicking/tapping it would actually close an already hidden menu. That would be confusing to the end-user. Sorry if this isn’t clear… let me know if it doesn’t make sense.
I think there would be a need to play with custom js to manipulate classes directly. I don’t have the skills required to analyse and understand the current component well enough by myself though. But if you can point me in the right direction, I should be able to follow through!
hey @gbeaudoin did you ever land on a nice solution that auto-closes the mobile nav menu when an option is selected? i’m experiencing the same issue when users login through overlay and then land back on page with nav menu expanded still.
Unfortunately no, I ended up going for a native app instead of PWA.
hey @aurelie any insight on this? we’re using the nav menu. on mobile from top, height = 100% of viewport. users can login and page refreshes. however, the nav menu is still expanded so it’s confusing to folks that they have to tap menu hamburger button to close menu. anyway we can hook into the nav menu to force it to close when on mobile?
@forgelab were you able to make it work? Facing the same issue
sorry for the late reply @Himanshu i just saw your note. unfortunately, no i havent built a workaround yet. user lands back on the menu once they’ve logged in and then have to manually close it.
if i revisit and get a workaround in place, i’ll make sure to update this thread for you.
Putting this solution here that worked for me: the variable that my mobile menu is tied to is called “displayMobileMenu.” I was able to make a global trigger that on every page load it sets this to False.
Accessible by the hamburger menu “More” up top and then “Trigger app workflows.”
Hope this helps someone.
