Hello I am trying to implement Wayfinder with Bootstrap 5 nav dropdowns.
how can I give the collapseLayouts
the same details as the id
. I would be glad of some help.
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
<div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
Layouts
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
<nav class="sb-sidenav-menu-nested nav">
<a class="nav-link" href="layout-static.html">Static Navigation</a>
<a class="nav-link" href="layout-sidenav-light.html">Light Sidenav</a>
</nav>
</div>
My wayfinder snippet is as follows
[[Wayfinder? &startId=`2`
&displayStart=`0`
&startitemTpl=`startitemTpl`
&selfClass=`show`
&level=`2`
&outerTpl=`outer`
&outerIdPrefix=``
&outerClass=`sb-sidenav accordion sb-sidenav-dark`
&rowTpl=`row`
&rowIdPrefix=``
&rowClass=`nav-link`
&parentRowTpl=`parentRow`
&parentIdPrefix=`sidenav[[+id]]`
&parentClass=`nav-link collapsed`
&innerTpl=`inner`
&innerIdPrefix=`sidenav[[+id]]`
&innerClass=`collapse`
&innerRowTpl=`secondInner`
&innerRowIdPrefix=``
&innerRowClass=`sb-sidenav-menu-nested nav`
]]
Any my parent row is as
<a [[+wf.id]][[+wf.classes]] href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]] data-bs-toggle="collapse" data-bs-target="#[[+wf.id]]" aria-expanded="false" aria-controls="[[+wf.id]]" >
<div class="sb-nav-link-icon">
<i class="[[+link_attributes]] nav_icon "></i>
</div>
[[+wf.linktext]]
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
[[+wf.wrapper]]
</a>
And my inner row is as
<!-- &innerTpl -->
<div [[+wf.id]][[+wf.classes]] aria-labelledby="[[+wf.id]]" data-bs-parent="#[[+wf.id]]">
<nav class="sb-sidenav-menu-nested nav">
[[+wf.wrapper]]
</nav>
</div>