MODX: How to implement Wayfinder for Bootstrap 4 submenus?

Question

MODX

The difference from Bootstrap 3 is that now the nested menu design is not

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Subitem1</a></li>
    <li><a href="#">Subitem2</a></li>
  </ul>
</li>

a

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="http://example.com" id="supportedContentDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  <div class="dropdown-menu" aria-labelledby="supportedContentDropdown">
    <a class="dropdown-item" href="#">Subitem1</a>
    <a class="dropdown-item" href="#">Subitem2</a>
  </div>
</li>

Those. div>a is now used instead of ul>li .

Answer 1

I recommend pdoMenu from pdoTools instead of Wayfinder - you can set elements there without creating extra chunks.
https://docs.modx.pro/components/pdotools/snippets...
See the Template Options section to replace inner menu item wrappers with divs.

Answer 2

evo?
innerTpl:
innerRowTpl

<a class="dropdown-item" href="[+wf.link+]">[+wf.linktext+]</a>[+wf.wrapper+]