An image divider between each menu link

I am wondering if it is possible to have an image divider between each menu link, using the wayfinder. Like this: home | about | contact. | represents the image divider. Thanks in advance.

You could do that using CSS.

Or you could create a custom &rowTpl and place your image there.

I have tried custom rowtpl but haven’t been able to get it to work. Maybe I am doing something wrong. So can someone please have a look at what is below, and tell me how I can improve it?

Chunk - mh.RowTpl:
<li><a title="[+wf.title+]" href="[+wf.link+]">[+wf.linktext+]</a> <img src="http://domainname.com/cms/assets/templates/home/images/btnsdivider.gif" width="1" height="36" align="absMiddle" /> [+wf.wrapper+]</li>

In web page template:
[!Wayfinder?&startId=`0` &level=`1` &RowTpl`!]

if your chunkname is

mh.RowTpl

you need to call WF like this:

I have just tried your code sharkbait. The divider still isn’t showing.

Change &RowTpl to &rowTpl

I used to use an image but now I just use a border property and use line-height to control the height of the border and some padding as well as a class on the first item (or last if you use border-right). It makes the Wayfinder template easy. For CSS:

ul#menu li {
float: left;
text-transform: lowercase;
font-size: .85em;
border-left: 1px solid #fff;
padding: 0 8px;
line-height: .8em;
}

ul#menu li.menufirst {
border-left: none;
}

Example here: beta.collaborativemedia.ca