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

[vibedesign]

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

<ul>
   <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>
      <ul>
         <li>Dropdown 1</li>
         <li>Dropdown 2</li>
         <li>Dropdown 3</li>
      </ul>
   </li>
</ul>

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)

[[Wayfinder? 
   &startId=`0`
   &level=`2` 
   &rowTpl=`naviRow` 
   &hereClass=`current` 
   &parentClass=`icon`
]]

// the naviRow tpl (so far)

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

[ilja-web]

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

[vibedesign]

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>
   [[+wf.wrapper]]
</li>


// for pdoMenu (&tplParentRow)

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

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

[nuan88]

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

Good thinking.

[vibedesign]

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