Wayfinder add different custom "dropdown" class to li and a

I want to create a navigation using Wayfinder in this form:

   <li class="active-class"><a>Option 1</a></li>
   <li><a>Option 2</a></li>
   <li class="dropdown-li-class"><a class="dropdown-a-class">Option 3</a>
         <li>Dropdown 1</li>
         <li>Dropdown 2</li>
         <li>Dropdown 3</li>

So I need to define three different classes within Wayfinder:

  • active-class on the currently viewed page
  • dropdown-li-class on the li-item containing the dropdown list
  • dropdown-a-class on the a-item within the li-item containing the dropdown list

I know I can define the active-class with the &hereClass-property and also the dropdown class via the &parentClass. What I don’t know is how to set the &parentClass individually for the li and the a tag. As far as I know I can only define where all classes go with [[+wf.classes]]. Any ideas?

// the Wayfinder call (so far)


// the naviRow tpl (so far)

   <a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.classes]]>[[+wf.linktext]]</a>

Try https://docs.modx.pro/en/components/pdotools/snippets/pdomenu. It’s faster and I think your situation is easier to accomplish.


To be fair, turns out in my case Wayfinder could’ve worked just as well, I was simply too focused on setting the classes seperately from the templates. The solution is to simply add the needed classes in the &parentRowTpl (or now that I’m using pdoMenu in the &tplParentRow) like this:

// for Wayfinder (&parentRowTpl)

<li class="dropdown-li-class">
   <a href="[[+wf.link]]" [[+wf.attributes]] class="dropdown-a-class">[[+wf.linktext]]</a>

// for pdoMenu (&tplParentRow)

<li class="dropdown-li-class">
   <a href="[[+link]]" [[+attributes]] class="dropdown-a-class">[[+menutitle]]</a>

I’ve never looked into pdoTools before, so very thankful for that hint @ilja-web! Will use that alot more in the future.

So, to be clear, use no parentClass at all, just define the area of parents in tplParentsRow?

Good thinking.

In my case yes, you can of course still define the parentClass and call it with the respective [[+wf.classes]] tag.

1 Like

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.