Toggle mobile menu (Navigation menu) - how to close it?

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? :slight_smile:

image

Mmm I think you’ll find this navbar more helpful:

Let us know if not!

Hi Joyce, thanks for the reply!

I’m already using the nav bar for an actual nav bar :stuck_out_tongue: 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?

1 Like

Maybe you could create a state on the navigation menu? I’m not sure :confused:

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!