Wayfinder and Bootstrap3

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.

Posted on July 20, 2014 at 07:48:00
Tags: Bootstrap3, Wayfinder
Words: 196
Level: Advanced
Dependencies: Bootstrap 3, Wayfinder, MODX

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>
MODX:
Website development platform combining security, power, and innovation.