Wayfinder and Bootstrap3

This article demonstrates the elements used to create the traditional Bootstrap3 menus with the same look and feel as is identical to that shown on the providers site.

Authored on

Tags
wayfinder
boostrap
Framework
MODX2

With Dropdown effect

Dropdown Snippet Call

<div class="navbar-collapse collapse navbar-responsive-collapse navbar-left">
[[!Wayfinder?startId=`[[+site_start]]`
        &level=`2`
        &sortBy=`menutitle`&sortOrder=`ASC`
        &innerTpl=`tpl.Wayfinder.inner`
        &parentRowTpl=`tpl.Wayfinder.parent`
        &outerTpl=`tpl.Wayfinder.outer`
        &titleOfLinks=`menutitle`
        &excludeDocs=`1`]] </div>

tpl.Wayfinder.inner

[[+wf.wrapper]]

tpl.Wayfinder.parent

<li class="[[+wf.classnames]]"> <a href="[[~[[+id]]]]" title="[[+wf.title]]" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false"> [[+wf.linktext]] <b class="caret"></b> </a> <ul class="dropdown-menu"> [[+wf.wrapper]] </ul> <b class="caret-out"></b> </li>

tpl.Wayfinder.outer

<ul class="nav navbar-nav" role="navigation"> [[+wf.wrapper]] </ul>  

 

Without Dropdown effect

Static Bar Snippet Call

[[!Wayfinder
                        ?startId=`[[+site_start]]`
                        &level=`1`
                        &sortBy=`pagetitle`
                        &rowTpl=`tpl.Wayfinder.Navbar`
                        &outerTpl=`tpl.Wayfinder.outer`
                        &titleOfLinks=`longtitle`
                        &excludeDocs=`1`]]

tpl.Wayfinder.Navbar

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

tpl.Wayfinder.outer

<ul class="nav navbar-nav" role="navigation"> [[+wf.wrapper]] </ul>