SOLVED - Include parent folder in menu output

This has probably been asked before, but I can’t find a reference to it.

I have a simple menu using Wayfinder and it works fine.

The folder structure is:

ID 9 - Gigs - this month
ID 30 - April
ID 33 - May
ID 34 - June
ID 35 - July

But Wayfinder only shows the menu items that are in the folder, that is; - April - May - June - July and I want to show the Gigs - this month as well as these menu items.

I’m using this call - [[Wayfinder? &startId=`9` &level=`1`]]

The page can be seen at http://80.247.1.230/gigs.html

Thanks!

Steve

You’ll need to use the &displayStart parameter and the &startItemTpl template.

You can find info on using these here.

Thanks - I’m a bit of a novice with this .. can you explain EXACTLY how I do this?

Thanks

Steve

Firstly, you need to add the &displayStart parameter to your Wayfinder call so it now looks like:

This tells Wayfinder to include the document used as the startId, in this case document 9. If you view your menu you will see that document 9 is now included in the menu output but is not formatted properly. This is because it’s using the default &startItemTpl chunk which looks like this:

<h2>[+wf.linktext+]</h2>[+wf.wrapper+]

You need to create a new &startItemTpl chunk that matches your menu structure.

Add the &startItemTpl parameter to your Wayfinder call so it now looks like:

Here I’ve called the chunk menuStart but you can name it anything you want. Next, create a new chunk called menuStart and put in the html code and placeholders you need to match your menu. Since your menu is using the default &rowTpl chunk, we can use this as the code for the &startItemTpl with a minor change. Add this code into your menuStart chunk:

If you view your menu now, it will look almost right except for the nested <ul> tags. These are created by the default &outerTpl chunk. To remove these, we need to add a custom &outerTpl chunk to the Wayfinder call. Add the &outerTpl parameter to your Wayfinder call so it now looks like:

I’ve called the &outerTpl chunk menuOuter but as with the &startItemTpl chunk, you can name it as you please. Create the menuOuter chunk and add the following placeholder:

Your menu should now include the start document and be formatted correctly.

Almost there! Many thanks (it all looks so easy when you know what you’re doing!)

.. the only part not formatted is when you navigate away from the main folder (gigs) as that tab on the menu should change, but it retains the ’active’ class, see below output html ..

It’s not the end of the world, but would look better if this class can be removed when moving to a new tab.

<!--tab container-->
<div id="tabs">
<!--content tabs-->
<ul><li class="active"><a href="/gigs.html" title="Gigs - this month" >Gigs</a></li>
<li><a href="/30.html" title="April" >April</a></li>
<li class="active"><a href="/33.html" title="May" >May</a></li>
<li><a href="/34.html" title="June" >June</a></li>
<li class="last"><a href="/35.html" title="July" >July</a></li>

</ul>

</div><!--end of tab container-->

What you can do is remove the default &hereClass parameter which adds class="active" to the current item and all parents and use the &selfClass parameter which applies to the current item only and not the parents. So your Wayfinder call would be:

Alternatively, you could leave the &hereClass as active and just add &selfClass=`current`:

Then you just need to change your CSS rule to style the current class instead of the active class:

There you go again, making it look so easy!

The second option didn’t work, but the first one does, so it all look great.

Thanks again

Steve