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

Home Forums Support Off Canvas Menu UX for clickable vs. non-clickable nav items

  • This topic has 6 replies, 2 voices, and was last updated 1 year ago by Tom.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #992494
    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?

    #992575
    Tom
    Lead Developer
    Lead Developer

    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?

    #993234
    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)?

    #993240
    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

    #993337
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #993717
    drew

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

    #994168
    Tom
    Lead Developer
    Lead Developer
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.