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.

Hi,

Thx for informations @jurriaanroelofs.

Please, tell me when it could be tested.
I'm voluntary to be a beta tester if you need.

At this state, the mobile menu provided by the dxpr_theme is not satisfying and my customers are not happy.

I wanted to use this theme to build others websites but I will wait this fix to do it.

Many thanks for your work!

Hi Jurriaan

Have you a visibility on the new dev for the menu?

Many thanks.

Well, I have updated to version 6 with the hope this point was fixed, but sadly no...

Hi all,
I'd really love to see this fixed as well. I LOVE the dxpr theme - and I recommend it to my students all the time. But this is a big issue.

for instance:
News is the main menu and News Archive is the sub-menu.
I can't really have:
News
- News
- Archive

The feedback I've consistently gotten from customers and students is that it makes no sense to have (in this case) News listed twice. People will always click on the primary menu and expect it to go somewhere (and as noted above, if I don't do the 2nd approach, mobile users can never get to the news!)

Is there a solution in the works?

I, too, would love to have this fixed. As the theme menu works now, the desktop version of the navigation includes links to the most important content on our site. The full size version of the menu maintains the dropdown second level so that all menu links are available to the site visitor at all times.

When in displayed in a mobile device, the hamburger is clicked to display the top level links, but they are no clickable through to the intended page. Instead, they only act to open up the second level of the menu. Once that opens, neither the parent/first level link, breadcrumbs, nor a "return" is shown on that menu. Thus, all the visitor can access is the second level links.

The logic seems counterintuitive.

Our site visitors would expect a navigation experience that mimics the full display version of our menu, including the parent link, all child links, and a means by which to return to the top level navigation to explore a different area of the site.

I read a fairly long history on this issue, so I wonder whether the intention is to fix it?? While this DXPR theme suits our intended visual design, we will need to seek an alternate theme if the mobile navigation cannot be corrected.