Hi troubadour, here's my code.
<ul id="jetmenu" class="jetmenu blue"><li class="[[isActive? &id=`1`]]"><a href="[[++site_url]]">[[#1.pagetitle]]</a></li>
<li class="[[isActive? &id=`2` &parent=`[[UltimateParent]]`]]"><a href="[[~2]]">[[#2.pagetitle]]</a>
<div class="megamenu full-width">
<div class="row">
[[Wayfinder? &startId=`2` &categoryFoldersTpl=`mainNavCatMega` &outerTpl=`mainNavOuterMega` &parentRowTpl=`mainNavParentMega` &levelClass=`megalevel` ]]
</div>
</div>
</li>
<li class="[[isActive? &id=`3` &parent=`[[UltimateParent]]`]]"><a href="[[~3]]">[[#3.pagetitle]]</a>
<div class="megamenu half-width">
<div class="row">
<img src="assets2/images-content/lights.jpg" alt="image" />
<p>And now for something completely different</p>
<p class=""><a href="[[~82]]">[[#82.pagetitle]]</a></p>
<p class=""><a href="[[~83]]">[[#83.pagetitle]]</a></p>
<p class=""><a href="[[~84]]">[[#84.pagetitle]]</a></p>
</div>
</div>
</li>
[[Wayfinder? &startId=`0` &excludeDocs=`1,2,3` &rowTpl=`mainNavRow` &outerTpl=`mainNavOuter` &innerTpl=`mainNavInner` ]]
</ul>
&categoryFoldersTpl=`mainNavCatMega` I used category rel="category" on containers that I wanted to be new columns
<div class="col1 [[+wf.classnames]]">
<ul>
<li class="[[+wf.classnames]]"><a href="[[+wf.link]]">[[+wf.linktext]]</a></li>
[[+wf.wrapper]]
</ul>
</div>
and &outerTpl=`mainNavOuterMega`
and &parentRowTpl=`mainNavParentMega`
<li class="[[+wf.classnames]]"><a href="[[+wf.link]]">[[+wf.linktext]]</a></li>
[[+wf.wrapper]]
and I used a snippet isActive because I wanted to highlight if the top level button was active. Since I'm using multiple Wayfinder calls I can't get Wayfinder to do this for me
<?php
$output='';
$thisID = $modx->resource->get('id');
if(isset($id) && is_numeric($id) && $id == $thisID || isset($parent) && is_numeric($parent) && $parent == $id) {
$output='active';
}
return $output;
and then for regular old dropdowns (single column not megamenu)
&rowTpl=`mainNavRow`
<li class="[[+wf.classnames]]"><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
&outerTpl=`mainNavOuter`
&innerTpl=`mainNavInner`
<ul class="dropdown [[+wf.classnames]]">[[+wf.wrapper]]</ul>
and finally I'm using 4 levels in the tree per the attached and targeting css like
