How to create clickable links and child menu items on the same top level menu

General
#1

This code is for the clickable links on the same top level menu.
How do I change this to also allow child menu items and the entry not clickable on the same top level menu?

<li [[+wf.id]][[+wf.classes]] onClick="void(0)">
  [[+menuHeader:is=`Yes`:then=`<span class="menuSectionHeader">[[+wf.linktext]]</span>`]]
  [[+menuHeader:isnot=`Yes`:then=`
  	[[+wf.level:isnot=`1`:then=`<a href="[[+wf.link]]" [[+wf.attributes]]>`:else=`<span>`]]
  	[[+wf.linktext]]
  	[[+wf.level:isnot=`1`:then=`</a>`:else=`</span>`]]
  `]]
  [[+wf.wrapper]]
</li>

I think this is the code that creates a top level menu with items. So these 2 need to be combined I think.

[[+menuHeader:is=`Yes`:then=``]]
[[+menuHeader:isnot=`Yes`:then=`<option [[+wf.classes]] value="[[+wf.link]]">[[+wf.linktext]]</option>`]]
[[+wf.wrapper]]
#2

Similar to this one but it doesn’t have a code sample

#3

I’m not clear on what you’re trying to do but, generally speaking, the best way to make a link unclickable is to target it with CSS and set pointer-events:none; on it. If you want to modify the behavior of the click, rather than just disabling it, then target the relevant links with javascript, add a “click” event listener, and call preventDefault() on the event object. E.g,:

let links = document.querySelectorAll('.unclickable');
links.forEach(function(link){
    link.addEventListener('click', function(event){
        event.preventDefault();
        //do work here
    });
});

Using the onclick attribute is usually the wrong approach. Also, if you want to do this to all the links in a container it’s better to attach a single event listener to the container rather than one on each link.

#4

I’m trying to do this on the top level menu bar:

Single Page (Clickable)
Single Page (Clickable)
Single Page (Clickable)
Single Page (Clickable)
Single Page (Clickable)
Single Page (Clickable)
Single Page (Clickable)
Parent Page (Non Clickable)
… … Child Page (Clickable)
… … Child Page (Clickable)

#5

You can probably achieve this with a second template &parentRowTpl that is used for any document that is a container and has children.

[[Wayfinder?&rowTpl=`myRowTemplate`&parentRowTpl=`myParentTemplate`...]]

For more details, take a look at the documentation: https://docs.modx.com/current/en/extras/wayfinder

#6

Ah, yeah; so Wayfinder adds the class “parent” to parent pages by default. You just need to target that class with your CSS or JS.

#7

Maybe this isn’t good practice but could you not achieve this using the &parentRowTpl and removing the a href tag?

This is a normal parentRowTpl example;

<li><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li> <!-- ParentRow -->

This is a parentRowTpl example without a href tag;

<li>[[+wf.linktext]][[+wf.wrapper]]</li> <!-- ParentRow -->

1 Like
#8

achieve this using the &parentRowTpl and removing the a href tag

This is the way I’ve done it in the past. Might as well produce the markup you want from the get go.

One gotcha to be aware of is resources without children might still have the “container” checkbox checked, and resources with children might have it unchecked. And I’m fairly certain parentRowTpl looks for resources with container checked. So you’d have to make sure those are all correct.