wayfinder: display the parent document as part of the navigation?

I have several pages of this structure:

Contact
- Offices
- People
- International

I would like contact to show general numbers on the "contact" page, office numbers for "offices", individual peoples numbers for "people", and international office details for "International". So effectively they should be treated equally, not as children of "contact" but they have to live somewhere.

I would like contact, offices, people and countries to display all in one list, even though one is a parent of the other three. At the moment, to get contact in the list I have to use &displayStart=`1` and &startItemTpl to style it so it looks the same. Even then, whatever template I use it creates the parent out of the 3 childrens <ul> tags.

The problem is I don’t need an overview page here, I would like people to get straight to the data. If I changed the structure to this:

Contact Overview
- Contact
- Offices
- People
- International

the nav would work, but there would be a redirection to www.myhost.com/contactoverview/contact when I just want all the general numbers to be in www.myhost.com/contact and all other pages to be myhost.com/contact/offices etc.

There’s also another problem with the &hereClass as it applies a style to not only what document you’re on, but also to the parent of that document, so effectively with the one parent and three children structure you would have two items highlighted as the parent would always have hereClass applied to it.

Is there a solution to the problem? Thanks.

Have the startItemTpl start your <ul>, then have its item as a link in a li (like the rowTpl), and have the outerTpl NOT have the opening <ul>, just [+wf.wrapper+]</ul>. Play with these two tpls a bit as needed; you’ll begin to be able to visualize exactly what it will generate.

Thanks Susan, I’ve managed to get it working.

The only problem now is, my structure is like so:

Contact
- Offices
- People
- International

I have the "active" class applied to the li of the page I’m on. If I’m on International, this happens:

Contact (li class="active")
- Offices
- People
- International (li class="active")

So I have two items lighting up on the nav. How can I tell wayfinder to ignore parents and only apply active to the current page only?

Solved. &hereClass!

Thanks Susan!

Use the parameter

then in your css style the .current and not the .active - mix and match with ul ul li.current or ul ul li.active as necessary; you can also use id attributes in the startItemTpl chunk to make it easier to style/not style the start item. You can also control the classnames in the chunk tpls by using/omitting [+wf.classes+] as desired.

&hereClass
default: active
values: name of class
description: The hereClass will be applied to the current item and to each parent up the document tree.
&selfClass
default: NULL
values: name of class
description: The selfClass will be applied to the current item only.