[Resolved] Off Canvas Menu UX for clickable vs. non-clickable nav items

[drew]

I’m curious to know if there are any suggestions on how to better handle the UX for Off Canvas Panel menu to make it clear when a menu item is there as a placeholder for child/grandchild menu items and when it is clickable.

Example: https://www.screencast.com/t/bAMKQXxWV

1. This parent menu item is not clickable
2. This child menu item is clickable but contains grandchild items as well.

Right now, it isn’t really clear visually which menu items do have URL targets compared to those that don’t. Are there any suggestions via settings or otherwise on how to make that more obvious to site visitors?

[Tom]

Hi there,

What exactly would make it more obvious? A different background color? Any examples of people doing something similar that we can check out?

[drew]

That’s an excellent question and one I was hoping you folks might already be discussing 🙂

But I’m confident we’re on the same page via the UX.

I tried creating new non-clickable menu items in the child positions as a work around (i.e. make any menu item that has sub menu items a non-clickable parent) but I’m not discovering that in this instance, when the secondary menu items are tapped, it closes the menu and in order to pen the respective sub menu items, the arrow has to be tapped.

Is it easy enough to modify that behavior so that if a menu item is a custom menu with the URL removed and has sub menu items, it would toggle open instead of close the entire menu?

Ex: https://www.screencast.com/t/rS82HY1HJdgL menu item #1 would toggle open the corresponding sub menu items regardless where user taps the “Museums” menu item (title or arrow)?

[drew]

Sorry, forgot to reference an example that could be a great solution: the Amazon mobile menu (browser version): https://www.screencast.com/t/kJlhorvuHU

[Tom]

Try setting the URL for those parent custom links to: #

That should make it so the entire item can be clicked/tapped to open the sub-menu.

Let me know 🙂

[drew]

That definately helps; I’ll keep my eyes out for other UX solutions that make the clickable vs. non-clickable option clearer visually.

[Tom]

Me too. Appreciate it 🙂

[Author]

Posts