Answered Wayfinder - How to turn this menu into a Wayfinder menu?

- ☆ A M B ☆
- 339 Posts
gallenkamp Reply #11, 10 years, 9 months ago
You could also use getResources for simple menues, but Wayfinder is the best you can get.

If anything looks odd, look out for the
```
[[+wf.wrapper]]
```
placeholder. That is where the UL for the next menu level will be placed. My first guess is that you can solve it with css only. Did you set the wayfinder call to
```
&level=`3`
```
?
- 25 Posts
flipflop1974 Reply #12, 10 years, 9 months ago
Hi Willi,

sorry for late answering... didn't notice that the thread got new entries...

To show you what I did will be little confusing but nethertheless it's worth to try

I start as usual with an ordinary wayfinder call in my template and it looks like this:
```
[[Wayfinder?
   &outerTpl=`outerTpl`
   &rowTpl=`rowTpl`
   &parentRowTpl=`parentRowTpl`
   &innerTpl=`innerTpl`
   &innerRowTpl=`innerRowTpl`
   ]]
```
The outerTpl:
```
[[+wf.wrapper]]
```
The rowTpl:
```
<li class="dropdown">
   <a href="[[+wf.link]]">[[+wf.linktext]]</a>
</li>
```
The parentRowTpl (with nested wayfinder call to manage the 3rd level):
```
<li class="dropdown">
<a class="dropdown-toggle" href="[[+wf.link]]">[[+wf.linktext]] </a>
<ul class="dropdown-menu">
[[Wayfinder?
   &startId=`[[+wf.docid]]`
   &outerTpl=`outerTpl2`
   &parentRowTpl=`parentRowTpl2`
   &innerTpl=`innerTpl2`
   &innerRowTpl=`innerRowTpl2`
   ]]
</ul>
</li>
```
Notice the start ID, it's importent to start at the current document id, otherwise the menu will duplicate itself at the third level...

But let's finisch documenting the Tpl's from the first wayfinder call...
The innerTpl:
```
[[+wf.wrapper]]
```
The innerRowTpl:
```
<li>
<a href="[[+wf.link]]">[[+wf.linktext]]</a>
</li>
```
Now let's look to the Tpl's from the nested second wayfinder call:
The outerTpl2:
```
[[+wf.wrapper]]
```
The parentRowTpl2:
```
<li class="dropdown-submenu">
<a href="[[+wf.link]]">[[+wf.linktext]]</a>
<ul class="dropdown-menu">
[[+wf.wrapper]]
</ul>
</li>
```
The innerTpl2:
```
[[+wf.wrapper]]
```
The innerRowTpl2:
```
<li>
<a href="[[+wf.link]]">[[+wf.linktext]]</a>
</li>
```
Hoping that will help you - I needed some nightly hours to get the (*not well coded*) menu working...

Grettings from Ausria!
Mike