unique class or id for each row in Wayfinder?

Im trying to use Wayfinder 2.0 to output a menu where each <LI> tag has a unique name of some sort. Like this:



I dont care what the class name is, it could be grabbing the page’s ID, alias, or whatever. It just needs to be unique.


Currently, this is my wayfinder call:

[[Wayfinder?startId=`0` &outerTpl=`mh.OuterTpl` &innerTpl=`mh.InnerTpl` &innerRowTpl=`mh.InnerRowTpl` &rowTpl=`mh.RowTpl` &firstClass=`first` &hereClass=`selected` &level=`1` &hideSubMenus=`false`]]

can anyone help me out?

Hi,

there are several ways to solve this.

One of them is to use the [+wf.docid+] placheholder in your tpl

<li id="nav_[+wf.docid+]">blah</li>

:-)

Ah thanks helio. That works just fine. Is there a list of available "parameters" around to reference?

Almost there. I used the above tip (using doc id’s to make custom class names for each list item), but face a small challenge to complete it--getting it to work with "active" feature in Wayfinder. First, was the fact that I had an "a class" defined within each LI like this:



So far, so good. Then I want to use the &hereClass setting to attempt to keep the button highlighted for the current page.




But of course since I am using my own class already, I couldnt figure out how to get the two to merge like this (i believe this is how CSS should be done:



Putting in the &hereClass does not seem to do anything (the class="active" does not get generated at all) since I have my own class defined already. So, plan B was to try to use ID’s instead of CLASS’s. But it basically doesn’t work at all (at least in Firefox) since this is probably outside CSS’s specs, I am guess...
E.g.



I am not a ModX, nor CSS pro by any means. I hired a company to create my CSS+HTML, so I have been doing what I can to integrate into Modx. It is also a volunteer job, so I am limited to forums for help. I appreciate any and all help offered. I am guessing there is a simple way to fix this using some other technique that I am unaware of.

- thanks in advance

In this case you should be able to style the active state with:


If you need to address each item individually you can try to add a <span> and put the custom ID in the span <span id="id12"> like this:


and you can style it like this:

HOORAY !

Hre is a simplified summary-->

In my stylesheet:


My chunk:


My Wayfinder call:



dev_cw, I owe you a pizza...

/\
/ \
/ o \
/ o \
/0 \
########

Good to hear.