Wayfinder menu with different li class

Hello,

I am using modx evo and would like to achieve the following using wayfinder. Please suggest.

<ul>
<li class="green">Green</li>
<li class="yellow">Yellow</li>
<li class="red">Red</li>
</ul>

Regards.

Hi,
I’ve got a super easy way if you don’t mind putting the class on the link instead of the LI:

Edit your Green document, and just put



... in the Link Attribute. And you get this:



Otherwise you can use the Link Attribute as above, then you can template the <li> and change your Wayfinder call to use that template.

Here’s the template chunk for your Row Template, I’ll name it MyMenuChunk. Notice how I added attributes to it.


And your call will be something like this, calling the chunk:


This is the Evo version. Slightly different syntax for Revo for chunk and call. You can work that out.

Cheers, Dave

For the rowTpl chunk have something like this:

This will give each <li> a classname of the linktext (by default the menu title) as well as any classnames Wayfinder generates (such as last or active). You can use any of the wf. placeholders to generate the classname.

[+wf.classes+] - where classes specifed will be inserted (includes class=" ")
[+wf.classnames+] - outputs the just the class names (without class=" ")
[+wf.link+] - the href value for your link
[+wf.title+] - text for the link title
[+wf.linktext+] - text for the link display
[+wf.wrapper+] - where to insert a submenu
[+wf.id+] - where to insert unique id
[+wf.attributes+] - where to insert link attributes
[+wf.docid+] - the document identifier for the current item
[+wf.subitemcount+] - displays the number of items in a folder
[+wf.description+] - output the description field
[+wf.introtext+] - output the introtext field

Yup, Susan’s way is great. Mine is a little more literal if you actually want "green", "blue", "namaste", whatever you’d like.

Susan,
Happy Birthday, Girlfriend!!!!
Dave

Thanks everyone. I will definitely give it a try. But I encountered one problem. When I tried to add a resource, the "Link Attribute" somehow does not get displayed. It disappears immediately. When I inspected the element via firebug, I saw it there in the code but with tag display:none. Why is it not getting displayed on the page?

It’s only for the classname, it shouldn’t be getting displayed anyway. On the other hand, it’s odd that it should be getting that attribute. Post your rowTpl, please.

This is what I was trying to say, the field "Link Attributes" is not showing. Firebug shows display:none;. How can I show it on the page?


Regards,
Santosh

Check your chunk "mm_demo_rules". This is installed by default and has a number demo settings, including one to hide that field. Comment out or delete that line in the chunk.

Thanks, actually I had deleted the chunk "mm_demo_rules" so when I restored it back by copying from my another modx evo site, it worked again.

I believe that if there is no chunk, MM reverts to a default configuration file in assets/plugins/managermanager.