MODX Community

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

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

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

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.

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)

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

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.

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