Using Wayfinder with Bootstrap 5

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>

I’m struggling to understand what you mean by that.

You say that you want to implement “Bootstrap 5 dropdowns”, but all your code creates some kind of accordion (that has nothing to do with the Bootstrap page you linked).


In your call to Wayfinder you use the properties &outerIdPrefix, &parentIdPrefix, &innerIdPrefix and &innerRowIdPrefix that don’t exist. (Also, there is no need to define a &startitemTpl when &displayStart is 0.)

Thanks for your reply @halftrainedharry,
I am using the sidenav from this dashboard.

I’m still not sure what you are trying to do, but assuming that you are looking for a way to have the same id for <a ... data-bs-target="#collapseLayouts"> and <div id="collapseLayouts" ...> then maybe this works:

Chunk parentRow

<a [[+wf.id]][[+wf.classes]] href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]] data-bs-toggle="collapse" data-bs-target="#collapseLayouts[[+wf.docid]]" aria-expanded="false" aria-controls="collapseLayouts[[+wf.docid]]" >
   <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> 
</a>

<div id="collapseLayouts[[+wf.docid]]" [[+wf.classes]] aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
    [[+wf.wrapper]]
</div>

Chunk inner

<nav class="sb-sidenav-menu-nested nav">
[[+wf.wrapper]]
</nav>