How to configure Wayfinder for Bootstrap 5 Dropdown-Menu

[dragonstyleGG]

Hi,

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

The output should be like so:

<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-Thing” do confuss me evertime. I spend a few our on the docs, but I can’t get it done.

The WF-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, after trying a few things that didn’t work.

The Level 1 menue work. But not the dropdown.

Did somone have an Idea?

[halftrainedharry]

I think something like this should work:

[[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 tpl_row

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

Chunk 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 tpl_innerrow

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

[dragonstyleGG]

Thank you so much…that worked very well.