Parent Menu Link click on Mobile

Created on 22 December 2023, 11 months ago
Updated 20 August 2024, 3 months ago

Hello,

I have a problem with the menu links when it's collapsed on mobile.

I can't click on parent menu and go to the page. Instead it opens the children submenu links.
I would like to keep the ability to click on the parent menu when it's linked to a content and have the three dots to open the submenu.

Do you have any solution to achieve that behavior?

Thank you for your help,

Julien

💬 Support request
Status

Needs work

Version

6.0

Component

Code

Created by

🇧🇪Belgium Melju

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Melju
  • 🇳🇱Netherlands jurriaanroelofs

    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

  • 🇧🇪Belgium Melju

    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

  • Status changed to Closed: works as designed 11 months ago
  • 🇳🇱Netherlands jurriaanroelofs

    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.

  • 🇫🇷France lor

    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...

  • Status changed to Needs work 6 months ago
  • Assigned to jurriaanroelofs
  • 🇳🇱Netherlands jurriaanroelofs

    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.

  • 🇫🇷France lor

    Many thanks Jurriann!

  • 🇳🇱Netherlands jurriaanroelofs

    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.

  • 🇫🇷France lor

    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!

Production build 0.71.5 2024