Top level drop-down menu, how to make 'non-clickable'

Hi all, super easy question but I am stumped.
I’ve got a basic sub menu structure.

  • I enabled “Display Dropdowns in Menubar” in MyTheme inherited from OpenPublishing/Quark
  • I made a page to be my top-level menu item
  • I made some sub-pages, which show up nicely as a tidy drop-down menu

I want the top level menu item to be non-clickable. I just want it to pull down the sub menu, there is no content on that page and being able to click the menu item breaks the ux. Is there a setting or method for this?

Many thanks,
Joel

Hi Joel,
welcome to the grav community :smiley:
you should be able to achieve what you want by applying some CSS to your top-level menu.
pointer-events would be the hint .
also note, when changing your theme’s CSS, best practice is to create a child theme,
see theme inheritance

Update: This “solution” only works when using Quark itself, not when using OpenPlublishing. See next reply.

Original:
@joel-marks I see two options to fix the issue:

  1. The css option mentioned by @hoernerfranz (thanks I didn’t know about pointer-events) might do the trick, but I fail to find the right selector for individual toplevel-menuitems having a dropdown. Standard OpenPublishing/Quark does not add any specific classes/attributes for toplevel menuitems which have a submenu.
  2. Or you could alter the macro “/user/themes/<your-inherited-theme>/templates/macros/macros.html.twig” (Copy from “/users/themes/quark/templates/macros/macros.html.twig”) and change line 7 from:
    <a href="{{ p.url }}" class="{{ active_page }}">
    
    into:
    <a class="{{ active_page }}">
    
    You could of course use your own preferred element instead.

Hope this helps…

I’m really surprised at this. I would consider this a core functionality UX issue, rather than a hack around the edges kind of thing :confused:

@hoernerfranz -I am not sure how to approach your solution. I lack the technical skills perhaps. I can hack at css but not write it. Inspecting the element finds no selector that I can address specifically with css. I like the solution of turning off the pointer events, it seems elegant. If you have time, perhaps you could give me some more help?

@pamtbaau Thank you so much. Sadly I am not having any luck with your second solution, the macro alteration. I wonder if I am doing something wrong? To be specific, I have followed your instruction to the letter (I think)!

This it the resulting macro.html.twig, which I put in my child theme

{% macro nav_loop(page) %}
  {% import _self as macros %}
  {% for p in page.children.visible %}
{% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
{% if p.children.visible.count > 0 %}
  <li>
    <a class="{{ active_page }}">
    </a>
    <ul>
      {{ macros.nav_loop(p) }}
    </ul>
  </li>
{% else %}
  <li>
    <a href="{{ p.url }}" class="{{ active_page }}">
      {{ p.menu }}
    </a>
  </li>
{% endif %}
  {% endfor %}
{% endmacro %}

@joel-marks, I’m sorry having lead you the wrong way… I did my test on a child of Quark, not in MyTheme which comes with OpenPublishing.

After downloading OpenPublishings skeleton I found out that OpenPublishing has overridden Quarks “/user/themes/quark/templates/partials/navigation.html.twig”, which imports “macros.html.twig”. OpenPublishing’s “navigation.html.twig” generates the menu itself.

Correct solution:
Copy template “/user/themes/quark-open-publishing/templates/partials/navigation.html.twig” into folder “/user/themes/mytheme/templates/partials/” and change line 7 from:

<a href="{{ p.url }}" class="{{ active_page }}">

into:

<a class="{{ active_page }}">
You could of course use your own preferred element instead.

@joel-marks, I think I can agree with you that the current design of the menu is not an ideal UX experience. This also plays out on mobile where the user has to tap the tiny “+” (phone) or “v” (tablet) next to the menu-item.

Instead of removing the href like that, I’d rather add a condition:

<a {% if not p.header.unclickable %} href="{{ p.url }}" {% endif %} class="{{ active_page }}">

And then, add in the frontmatter of this page:

unclickable: true

But more important, wouldn’t be easier to replace your parent page by a folder ?

- Page 1
     page.md
- Page 2
     page.md
- Folder
    - Subpage 1
        page.md
    - Subpage 2
        page.md
    ...

@AmauryH, To reflect on your suggestions:

  1. Per page based solution:
    Your suggestion of using a setting in the frontmatter of child pages may certainly have its use-cases. However, I’m not sure if this will improve UX. The user might not appreciate different behaviours for similar looking menu-items.

  2. Empty parent folders
    I don’t think this will solve the issue raised by OP. Grav will still create a clickable menu-item for the empty parent folder.

    Also, the urls of the child pages suggest there is a parent page. The user might be tempted to explore.
    Without a page in the parent folder, the user will then receive a 404. Adding a parent page might give the user more explanation.

Thanks so much @pamtbaau your solution works.
@AmauryH thanks for your suggestion too, I like the added functionality, but I see what @pamtbaau means regarding non-standardisation of UX elements leading to user confusion.

There is one last UX issue, although it’s not a deal breaker: The mouse-over state for the top-level of the menu is, rather incongruently ‘input-bar’… implying there is a user action that can take place on the element.

Do let me know if you have any thoughts as to how I could remove this mouseover state and just have the mouse cursor remain the same.

Thanks so much everyone, I could not have done this by myself :smiley:

@joel-marks, Do you mean you want the cursor icon to remain a pointer?

You could expand on the solution by adding a class to the anchor <p> as follows:

<a class="disabled-menu {{ active_page }}">

And use some css:

.navbar .disabled-menu {
   cursor: default;
}

@pamtbaau Thank you, that works like an absolute charm :innocent::smiley::ok_hand: