Help understanding Wayfinder

Support Extras
1

Hi all, Newbie here still roughing it as I try to understand the ins and outs of MODX. I am now struggling with Wayfinder, trying to understand how to build my nav with it.

First, here is generic html of what I am trying to output:

<nav class="collapse">
	<ul class="nav nav-pills" id="mainNav">
		<li class="dropdown">
			<a class="nav-link active" href="/">
				Home
			</a>
		</li>
		<li class="dropdown">
			<a class="nav-link" href="#">
				Products
			</a>
			<ul class="dropdown-menu">
				<li>
					<a class="dropdown-item" href="#">Widgets</a>
				</li>	
				<li class="dropdown-submenu">
					<a class="dropdown-item" href="#">Gizmos</a>
					<ul class="dropdown-menu">
						<li><a class="dropdown-item" href="#">Red Gizmos</a></li>
						<li><a class="dropdown-item" href="#">Blue Gizmos</a></li>
						<li><a class="dropdown-item" href="#">Yellow Gizmos</a></li>
					</ul>
				</li>
				<li>
					<a class="dropdown-item" href="#">Gadgets</a>
				</li>
			</ul>													
		</li>
		<li class="dropdown">
			<a class="nav-link" href="#">
				About
			</a>
		</li>
	</ul>
</nav>

As I read through Wayfinder docs, I THINK I am getting halfway there, by doing this:

Wayfinder Call:
[[Wayfinder?&startId=0&level=3&outerTpl=navOuterTpl&parentRowTpl=navParentTpl]]

navOuterTpl:

<nav class="collapse">
	<ul class="nav nav-pills" id="mainNav">
		[[+wf.wrapper]]
	</ul>
</nav>

navParentTpl:

<li class="dropdown">
	<a href="[[+wf.link]]" class="nav-link">[[+wf.title]]"</a>
	[[+wf.wrapper]]
</li>

What I am missing (if I am doing this right so far) is:

  1. How do I get active in the class of the currently selected top-level menu item?
  2. How do I get that 3rd level under Gizmos in there?

Hoping someone can help sort this out. As always, thanks in advance (and Merry Christmas!!)

2

You could add the placeholder [[+wf.classnames]] to navParentTpl

<li class="dropdown [[+wf.classnames]]"> ...

or alternatively set the property &parentClass=`dropdown` and use the placeholder [[+wf.classes]] in navParentTpl

<li [[+wf.classes]]>
1 Like
3

If you define an outer template &outerTpl, then you probably also want to define an inner template &innerTpl:

<ul class="dropdown-menu">
    [[+wf.wrapper]]
</ul>

Also, if you want to output different parent-row-templates for different levels, then you probably have to do something like this:

<li class="[[+wf.level:is=`1`:then=`dropdown`:else=`dropdown-submenu`]]">
	<a href="[[+wf.link]]" class="[[+wf.level:is=`1`:then=`nav-link`:else=`dropdown-item`]]">[[+wf.title]]"</a>
	[[+wf.wrapper]]
</li>
1 Like
4

There’s some really good Wayfinder documentation here.

1 Like
5

Hi all, I have read the fantastic tutorial pdf posted here by @bobray, and also worked to implement something similar to what @halftrainedharry posted, and I am VERY close. Wow, complicated, but awesome at the same time. I could certainly use a set of eyes on the one remaining problem I am having to get this fully dialed in.

Refer to my first post in this thread for an example of what I am trying to achieve, and see what I am getting now below:

Chunks:

navInnerTpl

<ul class="dropdown-menu">
	[[+wf.wrapper]]
</ul>

navOuterTpl

<ul class="nav nav-pills" id="mainNav">
	[[+wf.wrapper]]
</ul>

navRowTpl


<li class="[[+wf.level:is=`1`:then=`dropdown`:else=`dropdown-submenu`]]">
	<a href="[[+wf.link]]" class="[[+wf.level:is=`1`:then=`nav-link`:else=`dropdown-item`]]">[[+wf.title]]</a>
	[[+wf.wrapper]]
</li>

Wayfinder Call in my template:

[[Wayfinder? &startId=`0` &level=`3` &outerTpl= `navOuterTpl` &rowTpl=`navRowTpl` &innerTpl=`navInnerTpl` &firstClass=`` &lastClass=`` &hereClass=`active`]]`

Here is the nav menu it is generating:

<nav class="collapse">
	<ul class="nav nav-pills" id="mainNav">	
		<li class="dropdown">
			<a href="/" class="nav-link">Home</a>
		</li>
		<li class="dropdown">
			<a href="index.php?id=2" class="nav-link">
				Products
			</a>
			<ul class="dropdown-menu">			
				<li class="dropdown-submenu">
					<a href="index.php?id=8" class="dropdown-item">Widgets</a>						
				</li>				
				<li class="dropdown-submenu">
					<a href="index.php?id=9" class="dropdown-item">Gizmos</a>				
					<ul class="dropdown-menu">
						<li class="dropdown-submenu">
							<a href="index.php?id=14" class="dropdown-item">Red Gizmos</a>	
						</li>
						<li class="dropdown-submenu">
							<a href="index.php?id=15" class="dropdown-item">Blue Gizmos</a>
						</li>
						<li class="dropdown-submenu">
							<a href="index.php?id=16" class="dropdown-item">Yellow Gizmos</a>
						</li>
					</ul>
				</li>
				<li class="dropdown-submenu">
					<a href="index.php?id=10" class="dropdown-item">Gadgets</a>
				</li>
			</ul>
		</li>
		<li class="dropdown">
			<a href="index.php?id=3" class="nav-link">About</a>			
		</li>
	</ul>
</nav>

OK, so this is REALLY close with ONE caveat

My understanding is that &hereClass will be added to the class of the active item. In this case it is my home page, so I would have expected the first link generated to be:
<a href="/" class="nav-link active">Home</a>
instead, it is:
<a href="/" class="nav-link">Home</a>
Is the fact that I am setting that class in navRowTpl overriding that? If so, how could I get around this?

And on that topic, the only one I want marked as active is level 1, based on whatever submenu is chosen under that menu.

Thanks again in advance, and Merry AfterChristmas!

6

As I said in my first post, you have to use the placeholder [[+wf.classnames]] at the position where you want the class active to appear. In your case probably something like this:

...
<a href="[[+wf.link]]" class="[[+wf.level:is=`1`:then=`nav-link`:else=`dropdown-item`]] [[+wf.classnames]]">[[+wf.title]]</a>
...
1 Like
7

Bam! beating self. All is perfect now.

8

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.