Parent Menu Link click on Mobile

Hello Melju,

I think users will expect the link to open the menu when the 3 dots are there, changing the behavior to just a link would then not be user friendly.
Do you have any examples of mobile menus working as you describe?

Kind regards,
Jurriaan Roelofs
CEO, Chief Product Officer, DXPR

Hello Jurriaan,

I understand the logic behind the dots and I think it's clear.
The problem with this behavior is that we're loosing the ability to visit the parent page... It's also confusing because when you navigate on a desktop you can click and visit parent links.

Here's an example of a Drupal Menu that offers the possibility to navigate to submenu and click on parent page :

Responsive and off-canvas menu

Best regards,

Julien

Hi Melju,

Thanks but I didn't ask for a module that can do it, I was looking for sites that implement this design pattern. If we can see the full implementation of this pattern and how the site designed queues for the user to understand the design pattern, we can say something about the user friendliness of the navigation system. This is not possible by simply looking at the business logic in the module.

Here is a recent in-depth study of the UX problem we're facing:
https://www.smashingmagazine.com/2022/11/navigation-design-mobile-ux/

The follow quote resonates with DXPR's strive for making simplicity the tenet of our (and your) user experience:

On Mammut, the entire navigation bar drives the user to the second level of navigation. Their users can move to discover all items within the category or jump into a sub-category. Problems solved. Rather than overloading the navigation bar with separators and separate actions, we can help users move forward confidently and comfortably and prevent mistakes altogether. The next action is always just a tap away.

Always consider adding a link to the category page within the expanded accordion or in a separate view, and assign only a singular function to the entire bar — opening that view.

This describes the system we currently have in place, and we too recommend that you can place a top level page link inside the submenu if you think it's important they can access this link.

For now I'll close this issue as "works as designed" but feedback is still welcome of course.

Hi,

I'm agree with Julien and meet the same problem.

In Drupal, parent menu items could have links (or not).

With your behaviour, a lot of (parent) pages are inaccessible in mobile menu (they are on desktop).
And we don't have any options in DXPR settings to fix this (we could choose for example to display all the menu items instead of the dots, or dropdown buttons, and let the parent item link clickable).

It's very damaging for the website to not have pages accessible by the mobile menu...

Ok thanks for bringing this to our attention again guys. I consulted with "WCAG-GPT" and indeed we get some recommendations to improve the design. I will create a user story for this and assign it to a UX designer as soon as possible.

For reference, the recommendations:

1. Consistent Navigation (WCAG 2.4.3)
Guideline: Ensure that navigation mechanisms that are repeated on multiple web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
Application: The inconsistency between desktop and mobile navigation (where parent links are accessible on desktop but not on mobile) violates this guideline. Ensuring that parent links are accessible on both platforms aligns with WCAG 2.4.3, providing a consistent navigation experience.

2. Link Purpose (In Context) (WCAG 2.4.4)
Guideline: The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context.
Application: Current implementation might obscure the purpose of parent links if they are not directly clickable. Making parent links accessible and ensuring their purpose is clear adheres to this guideline, enhancing user understanding and navigation.

3. Navigable (WCAG 2.4.1)
Guideline: Provide ways to help users navigate, find content, and determine where they are.
Application: Providing a separate icon or indicator for expanding submenus while keeping parent links clickable makes the navigation more intuitive and easier to use, supporting better content discovery and navigation.

4. Keyboard Accessible (WCAG 2.1.1)
Guideline: Make all functionality available from a keyboard.
Application: Ensuring that both the parent link and the submenu are accessible via keyboard navigation is crucial. This can be achieved by making the parent link clickable and using a keyboard-accessible control (such as a button or icon) to expand submenus.

5. Multiple Ways (WCAG 2.4.5)
Guideline: Provide more than one way to locate a web page within a set of web pages.
Application: Offering multiple methods to access parent and child pages (e.g., clicking the text for parent pages, using an icon for submenus) ensures users can navigate in the way that best suits them, enhancing accessibility.

6. Visible Focus (WCAG 2.4.7)
Guideline: Any keyboard-operable user interface has a mode of operation where the keyboard focus indicator is visible.
Application: Ensuring the focus indicator is visible on both parent links and submenu expand icons helps users understand their current position within the navigation menu, making the site more accessible for keyboard users.

Implementation Example:
Parent Link Accessibility: Ensure the text of the parent link is clickable and navigates to the parent page.
Submenu Toggle: Use an accessible icon (e.g., a plus sign or an arrow) adjacent to the parent link that expands the submenu when clicked. Ensure this icon is keyboard accessible.
Consistent Experience: Maintain this behavior across both desktop and mobile platforms to ensure a consistent navigation experience.

I'm also moving this to the correct project.

Many thanks Jurriann!

Just to manage expectations: our team is currently working intensely on a number of initiatives across all our products and this issue will have to wait, probably a couple months. We might redesign the menu while at the same time refactoring dxpr_theme to be based on Single Directory Components.