What is the best pattern for opening Mega Nav on touch device when parent Nav items are link to landing pages?

Question

I have a mega menu opening on desktop, on hover over a parent nav strip. The parent nav items are links on click.

The same menu is to be used on landscape tablet. Without on hover, click is used to launch the mega menu. So we lose the click to launch the parent nav linked page.

What is the best pattern for this? (I've seen a tap and hold open the menu on some sites, with quick tap to launch link).

For keyboard only navigation what is the best alternative to Enter, after tabbing to the parent nav item, to launch the menu? Down cursor?

Answer 1

Even on desktop the double function of the parent nav is not very clear. A lot of user do not hover but click right away on the parent nav. So that can be confusing.

A pattern i have used for this problem is not to have this double function but place a "show all" as a first item in the mega menu.

Answer 2

Adding a "Show All" or overview link as the first item in the menu is a good way to handle it.

Or, you could radically simplify the navigation for mobile by linking those parent nav items directly to the index, or overview, pages for their sections. That would, of course, require that those overview pages list every major child link within their sections.

In recent user tests on mobile devices, test subjects found content more easily on index pages than they did with a mobile nav set.