0

how do I have to configure the "Wayfinder" in MODx to get a Bootstrap 5 output. specifically for the "Dropdown Submenue".

<div class="collapse navbar-collapse" id="navbarCollapse">
              <ul class="navbar-nav me-auto mb-2 mb-md-0">
                <li class="nav-item active">
                  <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="#">Project</a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Action</a></li>
                      <li><a class="dropdown-item" href="#">Another action</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">How-To</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
           </div>

I think it has to be the innerTpl and the innerRowTpl. The normal (level 1 menu) works. Just not the submenu. How do I have to configure that?

The Wayfinder call:

[[Wayfinder? &startId=`0` &level=`2` &outerClass=`navbar-nav me-auto mb-2 mb-md-0` &rowTpl=`tpl_navigation-menu` &rowClass=`nav-item` &innerTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]]

&rowTpl:

<li[[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]" class="nav-link" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

&innerTpl and innerRowTpl is still blank.

Did someone have an Idea?

Christian Türling
  • 3
  • 3

2 Answers2

0

Wayfinder often confusing here unfortunately, please take a look at snippet documentation diagram, it will help you to understand which chunks are used to form menu child elements.

Anton Tarasov
  • 534
  • 1
  • 7
  • 16
  • Hi, thanks for the link. But I still don't get it. I like MODx very. But the Wayfinder-Thing is every time (I did it not every day) a really struggling and confusing thing. – Christian Türling Sep 22 '22 at 11:39
  • The problem is, there is no example of the innerTpl inside this doc. With the parentRow I have gotten the result that the drop-down arrow is displayed. But it doesn't go any further. I can't get the drop down menu to open. – Christian Türling Sep 22 '22 at 12:55
  • Ok, I still stuck with it. Did someone make a Bootstrap 5 menue (with Dropdown) with MODx and can give me a hint? – Christian Türling Sep 23 '22 at 06:16
  • Wayfinder instruction provides @innerTpl explanation the same as example from above, did you fill it? What is inside? Alternatively you could use pdoMenu(from [pdoTools](https://docs.modx.com/current/en/extras/pdoTools) package), it's much more popular and faster. – Anton Tarasov Sep 23 '22 at 14:43
  • I tryed everything, and change it back and force, back and force and switch it ... The result is in every case not right. The more I read about the more I get confused. – Christian Türling Sep 23 '22 at 21:32
  • Please update this post with all chunks you use for Wayfinder, this is necessary for further testing – Anton Tarasov Sep 24 '22 at 13:50
0

OK,

here is the final solution. (For those who struggels with the Wayfinder-Stuff as me)

[[Wayfinder? 
&startId=`0`
&level=`2`
&outerClass=`navbar-nav me-auto mb-2 mb-md-0`
&innerClass=`dropdown-menu`
&rowTpl=`tpl_row`
&parentRowTpl=`tpl_parentrow`
&innerRowTpl=`tpl_innerrow`
]]

Chunk for tpl_row:

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

Chunk for tpl_parentrow:

<li class="nav-item dropdown [[+wf.classnames]]">
    <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="[[+wf.link]]">[[+wf.linktext]]</a>
    [[+wf.wrapper]]
</li>

Chunk for tpl_innerrow:

<li class="[[+wf.classnames]]">
    <a class="dropdown-item" href="[[+wf.link]]">[[+wf.linktext]]</a>
    [[+wf.wrapper]]
</li>
Christian Türling
  • 3
  • 3