1. AdvSearch
      1. AdvSearch.AdvSearch
        1. AdvSearch.AdvSearch.tpl
        2. AdvSearch.Advsearch.paging1Tpl
        3. AdvSearch.AdvSearch.paging0Tpl
        4. AdvSearch.AdvSearch.containerTpl
        5. Advsearch.AdvSearch.extractTpl
      2. AdvSearch.AdvSearchHelp
        1. AdvSearch.AdvSearchHelp.helplinkTpl
      3. AdvSearch.AdvSearchForm
        1. Advsearch.AdvSearchForm.tpl
    2. cookieJar
    3. getYoutube
    4. aliasid
    5. AddHeaderfiles
    6. AjaxUpload
    7. amazonSES mailing list
    8. Analytics
    9. Archivist
      1. Archivist.Archivist
        1. Archivist.Archivist.tpl
      2. Archivist.ArchivistGrouper
      3. Archivist.getArchives
        1. Archivist.getArchives.tpl
    10. Articles
      1. Articles.Theming Articles
      2. Articles.Roadmap
      3. Articles.Retrieving Articles Outside of Articles
      4. Articles.Creating a Blog
    11. Babel
      1. Babel.BabelLinks
      2. Babel.BabelTranslation
    12. BannerX
    13. BannerY
    14. Batcher
      1. Batcher.Roadmap
    15. bdListings
      1. bdListings.bdCategories
      2. bdListings.bdHookNewListing
      3. bdListings.bdListings
      4. bdListings.bdPriceGroups
      5. bdListings.bdRedirect
      6. bdListings.bdTargets
    16. boilerX
      1. bx-head-open
      2. bx-head-append
      3. bx-head-close
      4. bx-container-open
      5. bx-container-close
      6. bx-bottom-open
      7. bx-bottom-close
    17. BreadCrumb
      1. BreadCrumb.containerTpl
      2. BreadCrumb.currentCrumbTpl
      3. BreadCrumb.linkCrumbTpl
      4. BreadCrumb.maxCrumbTpl
      5. BreadCrumb.categoryCrumbTpl
      6. BreadCrumb.homeCrumbTpl
    18. Breadcrumbs
    19. BxrExtra
    20. cachebuster
    21. CamperManagement
      1. CamperManagement.Customizing the Component
      2. CamperManagement.Developing the front-end
        1. CamperManagement.cmCamperDetails Snippet
        2. CamperManagement.cmCampers Snippet
        3. CamperManagement.Placeholders you can use
      3. CamperManagement.Managing your vehicle
      4. CamperManagement.Module home
    22. Church Events Calendar
      1. ChurchEvents.MODX Manager functions
      2. ChurchEventsCalendar Snippet
        1. ChurchEvents.Managing events
      3. ChurchEventsList Snippet
      4. ChurchEventsRss Snippet
    23. Cliche
    24. ClientConfig
    25. CMPGenerator
      1. CMPGenerator.5 minute example
      2. CMPGenerator.Foreign Databases
    26. Collections
    27. ContextRouter
    28. CookieList
    29. CronManager
    30. cssSweet
      1. cssSweet.lighten
      2. cssSweet.modval
      3. cssSweet.prefix
    31. CustomUrls
    32. Databackup
    33. Discuss
      1. Discuss.ChunkMap
      2. Discuss.Contributing
      3. Discuss.Controllers
        1. Discuss.Controllers.board
          1. Discuss.Controllers.board.xml
        2. Discuss.Controllers.home
        3. Discuss.Controllers.login
        4. Discuss.Controllers.logout
        5. Discuss.Controllers.profile
        6. Discuss.Controllers.register
        7. Discuss.Controllers.search
        8. Discuss.Controllers.thread
      4. Discuss.Creating a Discuss Theme
      5. Discuss.Database Model
      6. Discuss.Features
      7. Discuss.Getting Started
      8. Discuss.Installation
        1. Discuss.Installation from Git
      9. Discuss.Roadmap
      10. Configuring Sphinx for Search
    34. DitsNews
    35. Eletters
      1. Eletters.API
      2. Eletters.FormIt
      3. Eletters.Import CSV
      4. Eletters.Templates
    36. EventManager
      1. EventManager.emListEvents
      2. EventManager.emNewReservationHook
    37. eventsCalendar2
      1. eventsCalendar2.eventsCalendar2
      2. eventsCalendar2.Generating events
      3. eventsCalendar2.tplCalendar2
      4. eventsCalendar2.tplCell2
      5. eventsCalendar2.tplEvent2
      6. eventsCalendar2.tplHead2
    38. EventsX
      1. EventsX.Examples
    39. ExerPlan
    40. fastField
    41. FileDownload R
      1. FileDownload R.FileDownload
      2. FileDownload R.FileDownloadLink
      3. FileDownload R.Plugins
    42. FileLister
      1. FileLister.FileLister
        1. FileLister.FileLister.directoryTpl
        2. FileLister.FileLister.fileLinkTpl
        3. FileLister.FileLister.fileTpl
        4. FileLister.FileLister.pathTpl
      2. FileLister.Roadmap
    43. FirstChildRedirect
    44. Flexibility
    45. ForcedPasswdChange
    46. FormIt
      1. FormIt.FormItCountryOptions
      2. FormIt.FormItRetriever
      3. FormIt.FormItStateOptions
      4. FormIt.Hooks
        1. FormIt.Hooks.email
        2. FormIt.Hooks.FormItAutoResponder
        3. FormIt.Hooks.math
        4. FormIt.Hooks.recaptcha
        5. FormIt.Hooks.redirect
        6. FormIt.Hooks.spam
      5. FormIt.Roadmap
      6. FormIt.Tutorials and Examples
        1. FormIt.Examples.Custom Hook
        2. FormIt.Examples.Simple Contact Page
        3. FormIt.Handling Selects, Checkboxes and Radios
        4. FormIt.Using a Blank NoSpam Field
      7. FormIt.Validators
    47. FormIt2db
    48. FormitFastPack
      1. FormitFastPack.Tutorial
      2. FormitFastPack.fieldSetDefaults
      3. FormitFastPack.field
      4. FormitFastPack.fiGenerateReport
    49. FormSave
    50. FoundationX
      1. FoundationX.How to Use FoundationX
    51. FX2themebase
      1. FX2.How to Use FX2
        1. FX2.For Theme Authors
      2. FX2.Included Extras
    52. Gallery
      1. Gallery.Example1
      2. Gallery.Gallery
        1. Gallery.Gallery.containerTpl
        2. Gallery.Gallery.thumbTpl
      3. Gallery.GalleryAlbums
        1. Gallery.GalleryAlbums.rowTpl
        2. Gallery.GalleryAlbums.containerTpl
      4. Gallery.GalleryItem
        1. Gallery.GalleryItem.albumTpl
        2. Gallery.GalleryItem.GalleryItemPagination
        3. Gallery.GalleryItem.tagTpl
        4. Gallery.GalleryItem.tpl
      5. Gallery.Plugins
        1. Gallery.Plugins.Galleriffic
        2. Gallery.Plugins.Slimbox
      6. Gallery.Roadmap
      7. Gallery.Setting Up the GalleryItem TV
      8. Gallery.Setting Up Your Gallery
    53. GatewayManager
    54. gCal
    55. getDate
    56. getFeed
      1. getFeed.Adding a Twitter Feed
    57. getPage
    58. getRelated
    59. getResourceField
    60. getResources
      1. getResources.Examples
        1. getResources.Building a RSS feed
        2. getResources.Category Index Page with Thumbnails
        3. getResources.Google XML Sitemap
    61. getUrlParam
    62. getRTImages
    63. getVimeo
    64. GoogleSiteMap
      1. GoogleSiteMap.GoogleSiteMap
        1. GoogleSiteMap.GoogleSiteMap.containerTpl
        2. GoogleSiteMap.GoogleSiteMap.itemTpl
      2. GoogleSiteMap.Roadmap
    65. GridClassKey
    66. HandyMan
      1. HandyMan.Frequently Asked Questions
      2. HandyMan.Installation
      3. HandyMan.Roadmap
    67. Hits
    68. HitsPage
    69. HybridAuth
      1. HybridAuth.Integrating Facebook
      2. HybridAuth.Integrating Google
      3. HybridAuth.Integrating Twitter
      4. HybridAuth.Integrating VK.com
    70. If
    71. Image+
    72. imageHERE
    73. ImageStyles
    74. ImportX
    75. LexRating
    76. Lingua
    77. Login
      1. Login.ChangePassword
      2. Login.ConfirmRegister
      3. Login.ForgotPassword
      4. Login.Login
      5. Login.Profile
      6. Login.Register
        1. Register.Example Form 1
      7. Login.ResetPassword
      8. Login.Roadmap
      9. Login.Tutorials
        1. Login.Basic Setup
        2. Login.Extended User Profiles
        3. Login.Request Membership
        4. Login.User Profiles
        5. Login.Using Custom Fields
        6. Login.Using Pre and Post Hooks
      10. Login.UpdateProfile
    78. Loginza
      1. Loginza.Loginza
      2. tpl.Loginza.login
      3. tpl.Loginza.logout
      4. tpl.Loginza.profile
    79. mChimpX
    80. MetaX
    81. mhPayPal
      1. mhPayPal.Snippet Usage
        1. mhPayPal.Snippet Usage.Hooks
        2. mhPayPal.Snippet Usage.Templating
    82. MIGX
      1. MIGX.Backend-Usage
      2. MIGX.Data-Entry
      3. MIGX.Frontend-Usage
      4. MIGX.Tutorials
        1. MIGX.Fancybox-images with seperate placeholders in Richtext-Content
        2. MIGX.Simple opening hours table
        3. Using resource-specific mediasource and multifile-uploader with MIGX
        4. MIGX.Varying layout-boxes
          1. MIGX.Varying layout-boxes.Configurator-Version
        5. Creating Selectable and Sortable lists for MIGX
        6. MIGX.sortable resourcelist
        7. Using resource-specific mediasource and multifile-uploader with MIGX
        8. MIGX.Using Grid Inline Editing
    83. MIGXdb
      1. MIGXdb.Configuration
      2. MIGXdb.Tutorials
        1. MIGXdb.Create a basic gallery-management from scratch with MIGXdb
        2. MIGXdb.Create doodles manager with help of MIGXdb
        3. MIGXdb.Manage Child-Resources in a grid-TV with help of MIGXdb
        4. MIGXdb.Manage Events-Resources in a CMP with help of MIGXdb
      3. MigxCalendars
    84. MinifyX
    85. miniShop
      1. miniShop.Screenshots
    86. modActiveDirectory
    87. ModDef
    88. modExtra
    89. modMobile
    90. modSwiftMailer
    91. mxCalendar
      1. mxCalendar.Examples
      2. mxCalendar.Placeholders
    92. mxExtendedMenu
    93. mxFormBuilder
      1. mxFormBuilder.Create Form
      2. mxFormBuilder.Hooks
      3. mxFormBuilder.Field Types
      4. mxFormBuilder.Create Form List in TV
      5. mxFormBuilder.Fields
    94. mxHasTvs
    95. MoneyBird
      1. MoneyBird.Contacts
      2. MoneyBird.Invoices
      3. MoneyBird.NrFormat
    96. ObfuscateEmail-Revo
    97. PackMan
      1. PackMan.Roadmap
    98. PageBreaker
      1. PageBreaker.PageBreaker
      2. tpl.PageBreaker.ajax
      3. tpl.PageBreaker.navigation
    99. Peoples
      1. Peoples.PeopleGroup
        1. Peoples.PeopleGroup.userTpl
      2. Peoples.PeopleGroups
        1. Peoples.PeopleGroups.tpl
      3. Peoples.Peoples
        1. Peoples.Peoples.tpl
      4. Peoples.Roadmap
    100. PHP Tidy (plugin)
    101. phpThumbOf
    102. Polls
      1. Polls.Polls
      2. Polls.PollsLatest
      3. Polls.PollsPrevious
      4. Polls.PollsResult
    103. POI Manager
    104. QuickCrumbs
      1. QuickCrumbs.Example
    105. Quip
      1. Quip.Quip
        1. Quip.Quip.tplComment
        2. Quip.Quip.tplCommentOptions
        3. Quip.Quip.tplComments
        4. Quip.Quip.tplReport
      2. Quip.QuipCount
      3. Quip.QuipLatestComments
      4. Quip.QuipReply
        1. Quip.QuipReply.tplAddComment
        2. Quip.QuipReply.tplLoginToComment
        3. Quip.QuipReply.tplPreview
      5. Quip.QuipRss
      6. Quip.Roadmap
      7. Quip.Upgrading
        1. Quip.Upgrading to 1.0.1
    106. Rampart
      1. Rampart.hook.RampartFormIt
      2. Rampart.hook.RampartQuip
      3. Rampart.preHook.RampartRegister
    107. Redirector
    108. renderResources
    109. ResourceWatcher
    110. RezImgCrop
    111. Rowboat
      1. Rowboat.Rowboat
    112. sekFancyBox
      1. sekFancyBox & Gallery
    113. sekFormTools
      1. sekFormTools.input.autocomplete
      2. sekFormTools.input.combobox
      3. sekFormTools.input.datepicker
      4. sekFormTools.input.helper
      5. sekFormTools.input.textfield
      6. sekFormTools Advanced Examples
    114. sekSiteTools
      1. sekSiteTools.easytabs
      2. sekSiteTools.google.analytics
      3. sekSiteTools.printdiv
    115. sekUserGalleries
      1. sekUserGalleries.album.items.helper
      2. sekUserGalleries.album.items.manage
      3. sekUserGalleries.album.manage
      4. sekUserGalleries.album.view
      5. sekUserGalleries.browse.galleries
      6. sekUserGalleries.directory
      7. sekUserGalleries.image.information
      8. sekUserGalleries.search
      9. sekUserGalleries.users.gallery.manage
      10. sekUserGalleries.users.gallery.view
    116. selfLink
    117. Shopkeeper
    118. siblingNav
    119. SimpleSearch
      1. SimpleSearch.Roadmap
      2. SimpleSearch.SimpleSearch
        1. SimpleSearch.Faceted Search Through PostHooks
        2. SimpleSearch.SimpleSearch.containerTpl
        3. SimpleSearch.SimpleSearch.currentPageTpl
        4. SimpleSearch.SimpleSearch.pageTpl
        5. SimpleSearch.SimpleSearch.tpl
      3. SimpleSearch.SimpleSearchForm
        1. SimpleSearch.SimpleSearchForm.tpl
      4. SimpleSearch.Solr
    120. SiteEditor
    121. sitemapFriend
    122. Slideshow Manager
      1. jgSlideshow Snippet
      2. Slideshow Manager CMP
    123. sLink
    124. SmartOptimizer
    125. SmartTag
    126. StatCache
    127. SocialLogin
    128. SocialSuite
      1. SocialSuite.getFacebookPhotos
      2. SocialSuite.getFacebookProfile
      3. SocialSuite.getFacebookShares
      4. SocialSuite.getGooglePlusShares
      5. SocialSuite.getTwitterProfile
      6. SocialSuite.prettyNumbers
    129. spieFeed
    130. StaticSaver
    131. StoreLocator
    132. SubscribeMe
      1. SubscribeMe.Configuring API Credentials, IPN and going Live
      2. SubscribeMe.Setting up the Payment Flow
        1. SubscribeMe - Listing the Products
        2. SubscribeMe - Setting up the Payment Methods
        3. SubscribeMe - Subscription Confirmation Page
      3. SubscribeMe.User Account Management
    133. SyntaxChecker
    134. Tagger
    135. TaggingAtoZ
    136. tagLister
      1. tagLister.getResourcesTag
      2. tagLister.tagLister
        1. tagLister.tagLister.all
        2. tagLister.tagLister.tpl
      3. tagLister.tolinks
        1. tagLister.tolinks.tpl
    137. TinyMCE
      1. TinyMCE.Spellchecker
      2. TinyMCE.Table controls
      3. TinyMCE.Template
    138. Upload to Users CMP
    139. VersionX
      1. VersionX.Roadmap
    140. virtuNewsletter
    141. VisionCart
      1. VisionCart.Back-end
        1. VisionCart.Category management
        2. VisionCart.Module management
        3. VisionCart.Option management
        4. VisionCart.Order management
        5. VisionCart.Product management
        6. VisionCart.Shop management
      2. VisionCart.Front-end
        1. VisionCart.vcGetCategories
          1. VisionCart.vcGetCategories.tpl
        2. VisionCart.vcGetProducts
          1. VisionCart.vcGetProducts.tpl
        3. VisionCart.vcWayfinder
      3. VisionCart.General
        1. VisionCart.Templating
        2. VisionCart.UserManagement
      4. VisionCart.vcGetProductImages
      5. VisionCart.vcGetProductOptions
    142. Wayfinder
      1. Wayfinder Introductory Examples
    143. xFPC

Wayfinder Introductory Examples

Last edited by David Pede on Aug 21, 2013.
This is a user-contributed Extra. If you find issues or would like more info or help, please contact the author.

Wayfinder is easily one of the single most important Snippets for your MODx site because nearly every site will use menus.

Before You Start

For the following examples, we will be referring to the following sample resources:

Diagram

Here is a graphical representation of the various formatting chunks we covered in these examples:

This may seem complex at first glance, but if you refer back to this diagram as you read through the below examples, it should help make things clear.

To Aid your Memory

It's good to explain right up front that Wayfinder's formatting properties come in 2 flavors: those that are meant to format LISTS and those that are meant to format LIST ITEMS.

List Chunks

Here are parameters that should reference chunks that contain some variant of a LIST, or a container of items:

  • &outerTpl
  • &innerTpl

List Item Chunks

Here are parameters that should reference chunks that contain some variant of an ITEM:

  • &rowTpl
  • &innerRowTpl
  • &parentRowTpl
Know Thy Chunks
This gets much easier once you understand which parameters should reference lists and which parameters should reference items.

Basic Usage

The simplest WayFinder call uses built-in formatting:

Snippet call:

[[Wayfinder? &startId=`55` ]]

Output example:

<ul>
        <li class="first"><a href="media-hub/news" title="HG in the News" >HG in the News</a></li>
        <li><a href="media-hub/events" title="HG Events" >HG Events</a></li>
        <li><a href="media-hub/press" title="Press Releases" >Press Releases</a></li>
        <li><a href="media-hub/blog/" title="HG Blog" >HG Blog</a>

                <ul>
                        <li class="first"><a href="media-hub/blog/test-section/" title="Blog Test Section" >Blog Test Section</a>

                                <ul>
                                        <li class="first"><a href="media-hub/blog/test-section/test-post" title="Test Post" >Test Post</a></li>
                                        <li><a href="media-hub/blog/test-section/other-post" title="Other Post" >Other Post</a></li>
                                        <li class="last"><a href="media-hub/blog/test-section/third-post" title="Third Post" >Third Post</a></li>
                                </ul>

                        </li>
                        <li class="last"><a href="media-hub/blog/archives" title="Blog Archives" >Archives</a></li>
                </ul>

        </li>
        <li><a href="media-hub/fast-facts" title="HG Fast Facts" >HG Fast Facts</a></li>
        <li><a href="media-hub/publications" title="HG Publications" >HG Publications</a></li>
        <li class="last"><a href="media-hub/media-contact" title="Media Contact" >Media Contact</a></li>
</ul>

You can see how the default behavior here nests unordered lists. Not too bad for a Snippet call that requires only a single parameter.

Formatting each Link: rowTpl

Next, we can specify verbatim how we want to format each link by setting the &rowTpl parameter as in the following Snippet call:

[[Wayfinder? &startId=`55` &rowTpl=`rowTpl`]]

We set our "rowTpl" Chunk to look like this:

<!-- rowTpl -->
<li[[+wf.id]][[+wf.classes]]>
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

Output Example:

<ul>
        <!-- rowTpl -->
        <li class="first"><a href="media-hub/news" title="HG in the News" >HG in the News</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/events" title="HG Events" >HG Events</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/press" title="Press Releases" >Press Releases</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/blog/" title="HG Blog" >HG Blog</a>

        <ul>
                <!-- rowTpl -->
                <li class="first"><a href="media-hub/blog/test-section/" title="Blog Test Section" >Blog Test Section</a>

                        <ul>
                                <!-- rowTpl -->
                                <li class="first"><a href="media-hub/blog/test-section/test-post" title="Test Post" >Test Post</a></li>
                                <!-- rowTpl -->
                                <li><a href="media-hub/blog/test-section/other-post" title="Other Post" >Other Post</a></li>
                                <!-- rowTpl -->
                                <li class="last"><a href="media-hub/blog/test-section/third-post" title="Third Post" >Third Post</a></li>
                        </ul>

                </li>
                <!-- rowTpl -->
                <li class="last"><a href="media-hub/blog/archives" title="Blog Archives" >Archives</a></li>
        </ul>

        </li>
        <!-- rowTpl -->
        <li><a href="media-hub/fast-facts" title="HG Fast Facts" >HG Fast Facts</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/publications" title="HG Publications" >HG Publications</a></li>
        <!-- rowTpl -->
        <li class="last"><a href="media-hub/media-contact" title="Media Contact" >Media Contact</a></li>
</ul>

See how it's basically the same thing, except this time we have explicit control over the formatting of each item?
We also included a comment in our chunk so it was clear how the output is iterated.

Outer Wrapper: formatting the <ul>

Next, we will explicitly format the outer unordered-lists <ul> by setting the &outerTpl parameter.

Here's out sample Snippet call:

[[Wayfinder? &startId=`55` &rowTpl=`rowTpl` &outerTpl=`outerTpl`]]

And here's our new Chunk "outerTpl":

<!-- outerTpl -->
<ul id="topnav"[[+wf.classes]]>
[[+wf.wrapper]]
</ul>

Sample output:

<!-- outerTpl -->
<ul class="topnav">
        <!-- rowTpl -->
        <li class="first"><a href="media-hub/news" title="HG in the News" >HG in the News</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/events" title="HG Events" >HG Events</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/press" title="Press Releases" >Press Releases</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/blog/" title="HG Blog" >HG Blog</a>

        <!-- outerTpl -->
        <ul class="topnav">
                <!-- rowTpl -->
                <li class="first"><a href="media-hub/blog/test-section/" title="Blog Test Section" >Blog Test Section</a>

                        <!-- outerTpl -->
                        <ul class="topnav">
                                <!-- rowTpl -->
                                <li class="first"><a href="media-hub/blog/test-section/test-post" title="Test Post" >Test Post</a></li>
                                <!-- rowTpl -->
                                <li><a href="media-hub/blog/test-section/other-post" title="Other Post" >Other Post</a></li>
                                <!-- rowTpl -->
                                <li class="last"><a href="media-hub/blog/test-section/third-post" title="Third Post" >Third Post</a></li>
                        </ul>

                </li>
                <!-- rowTpl -->
                <li class="last"><a href="media-hub/blog/archives" title="Blog Archives" >Archives</a></li>
        </ul>

        </li>
        <!-- rowTpl -->
        <li><a href="media-hub/fast-facts" title="HG Fast Facts" >HG Fast Facts</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/publications" title="HG Publications" >HG Publications</a></li>
        <!-- rowTpl -->
        <li class="last"><a href="media-hub/media-contact" title="Media Contact" >Media Contact</a></li>
</ul>

So we now have control over each item and over the format of the <ul> for each list.

Be careful: contrary to what you might think given its name, the outerTpl does not necessarily format only the final outer-most wrapper, it formats EACH group of items that contains children unless an innerTpl Chunk is specified!

If you want the more "expected" behavior where the outerTpl is used to format only the outer-most group, then you must explicitly specify the "innerTpl" parameter (see below).

One takeaway here is DO NOT use a CSS id inside your outerTpl because you might end up having multiple instances of the same ID on the page.

Did you notice how in our outerTpl we explicitly set the CSS class? You don't necessarily need to do that: Wayfinder includes parameters that allow you to set the CSS classes used by many of the component chunks (more on that in a bit).

ParentRow: Special formatting for the parent folder items

This time around we are going to specify a different formatting chunk for the items that are folders with children (i.e. "containers" as the documentation calls them). In our example image, this applies to the "HG Blog (59)" and to the "Blog Test Section (100)" pages.

Sample Snippet Call:

[[Wayfinder? &startId=`55` &rowTpl=`rowTpl` &outerTpl=`outerTpl` &parentRowTpl=`parentRow`]]

Here's what we have in our "parentRow" Chunk:

<!-- ParentRow -->
<li>
<a href="[[+wf.link]]">[[+wf.linktext]]</a> - [[+wf.description]]
[[+wf.wrapper]]
</li>

Sample Output:

And here is our sample output.

<!-- outerTpl -->
<ul class="topnav">
        <!-- rowTpl -->
        <li class="first"><a href="media-hub/news" title="HG in the News" >HG in the News</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/events" title="HG Events" >HG Events</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/press" title="Press Releases" >Press Releases</a></li>
        <!-- ParentRow -->
        <li><a href="media-hub/blog/">HG Blog</a> - HG Blog

                <!-- outerTpl -->
                <ul class="topnav">
                        <!-- ParentRow -->
                        <li><a href="media-hub/blog/test-section/">Blog Test Section</a> -

                                <!-- outerTpl -->
                                <ul class="topnav">
                                        <!-- rowTpl -->
                                        <li class="first">
                                        <a href="media-hub/blog/test-section/test-post" title="Test Post" >Test Post</a></li>
                                        <!-- rowTpl -->
                                        <li><a href="media-hub/blog/test-section/other-post" title="Other Post" >Other Post</a></li>
                                        <!-- rowTpl -->
                                        <li class="last"><a href="media-hub/blog/test-section/third-post" title="Third Post" >Third Post</a></li>
                                </ul>

                        </li>
                        <!-- rowTpl -->
                        <li class="last"><a href="media-hub/blog/archives" title="Blog Archives" >Archives</a></li>
                </ul>

        </li>
        <!-- rowTpl -->
        <li><a href="media-hub/fast-facts" title="HG Fast Facts" >HG Fast Facts</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/publications" title="HG Publications" >HG Publications</a></li>
        <!-- rowTpl -->
        <li class="last"><a href="media-hub/media-contact" title="Media Contact" >Media Contact</a></li>
</ul>

If we had omitted the &parentRowTpl parameter, the &rowTpl Chunk would have been used instead, and the output would have been identical to one of our previous examples.

innerTpl

Before we noticed how the outerTpl parameter is used to format the outer-most group
AND any other group of items. It basically is used as the <ul> container to wrap
the various list items. But it's pretty common that you'd want the outer-most <ul>
to use different formatting than the various <ul>'s that contain the sub-items.

That's when we can use the &innerTpl.

[[Wayfinder? &startId=`55` &rowTpl=`rowTpl` &outerTpl=`outerTpl` &parentRowTpl=`parentRow` &innerTpl=`innerTpl`]]

Sample Output:

<!-- outerTpl -->
<ul class="topnav">
        <!-- rowTpl -->
        <li class="first"><a href="media-hub/news" title="HG in the News" >HG in the News</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/events" title="HG Events" >HG Events</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/press" title="Press Releases" >Press Releases</a></li>
        <!-- ParentRow -->
        <li><a href="media-hub/blog/">HG Blog</a> - HG Blog

                <!-- innerTpl: outerTpl is used if this is not specified -->
                <ul class="topnav">
                        <!-- ParentRow -->
                        <li><a href="media-hub/blog/test-section/">Blog Test Section</a> -

                                <!-- innerTpl: outerTpl is used if this is not specified -->
                                <ul class="topnav">
                                        <!-- rowTpl -->
                                        <li class="first"><a href="media-hub/blog/test-section/test-post" title="Test Post" >Test Post</a></li>
                                        <!-- rowTpl -->
                                        <li><a href="media-hub/blog/test-section/other-post" title="Other Post" >Other Post</a></li>
                                        <!-- rowTpl -->
                                        <li class="last"><a href="media-hub/blog/test-section/third-post" title="Third Post" >Third Post</a></li>
                                </ul>

                        </li>
                        <!-- rowTpl -->
                        <li class="last"><a href="media-hub/blog/archives" title="Blog Archives" >Archives</a></li>
                </ul>

        </li>
        <!-- rowTpl -->
        <li><a href="media-hub/fast-facts" title="HG Fast Facts" >HG Fast Facts</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/publications" title="HG Publications" >HG Publications</a></li>
        <!-- rowTpl -->
        <li class="last"><a href="media-hub/media-contact" title="Media Contact" >Media Contact</a></li>
</ul>

innerRowTpl

The last remaining formatting bit is to distinguish between the top-level items and the ones buried deeper in a sub-menu.

This Chunk is a variation of the basic &rowTpl. Here's what we have for our "innerRowTpl":

<!-- innerRowTpl -->
<li><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

Snippet Call

Here's what our Snippet call looks like:

[[Wayfinder? &startId=`55` &rowTpl=`rowTpl` &outerTpl=`outerTpl` &parentRowTpl=`parentRow` &innerTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]]

Sample Output

And here's the outputed HTML:

<!-- outerTpl -->
<ul class="topnav">
        <!-- rowTpl -->
        <li class="first"><a href="media-hub/news" title="HG in the News" >HG in the News</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/events" title="HG Events" >HG Events</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/press" title="Press Releases" >Press Releases</a></li>
        <!-- ParentRow -->
        <li><a href="media-hub/blog/">HG Blog</a> - HG Blog

                <!-- innerTpl: outerTpl is used if this is not specified -->
                <ul class="topnav">
                        <!-- ParentRow -->
                        <li><a href="media-hub/blog/test-section/">Blog Test Section</a> -

                        <!-- innerTpl: outerTpl is used if this is not specified -->
                        <ul class="topnav">
                                <!-- innerRowTpl -->
                                <li><a href="media-hub/blog/test-section/test-post">Test Post</a></li>
                                <!-- innerRowTpl -->
                                <li><a href="media-hub/blog/test-section/other-post">Other Post</a></li>
                                <!-- innerRowTpl -->
                                <li><a href="media-hub/blog/test-section/third-post">Third Post</a></li>
                        </ul>

                        </li>
                        <!-- innerRowTpl -->
                        <li><a href="media-hub/blog/archives">Archives</a></li>

                </ul>
        </li>
        <!-- rowTpl -->
        <li><a href="media-hub/fast-facts" title="HG Fast Facts" >HG Fast Facts</a></li>
        <!-- rowTpl -->
        <li><a href="media-hub/publications" title="HG Publications" >HG Publications</a></li>
        <!-- rowTpl -->
        <li class="last"><a href="media-hub/media-contact" title="Media Contact" >Media Contact</a></li>
</ul>

In other words, the top level pages (56, 57, 58, 60, 61, 62) use the standard &rowTpl, and all pages in sub-folders
use the &innerRowTpl.

Setting classes

Before you go too far down the rabbit hole, let's quickly demonstrate how you can
use some of the other available parameters to affect the final output. You may not need to come up with a zillion different Chunks to format your output. See in our
examples how the first and last row items have custom CSS classes added? These
are intelligently added to the [[+wf.attributes]] placeholder inside of our "rowTpl":

<!-- rowTpl -->
<li[[+wf.id]][[+wf.classes]]>
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

We are going to set the following parameters so you can see how it affects the final output:

  • &firstClass
  • &lastClass
  • &rowClass
  • &outerClass

Snippet Call

Our adjust Wayfinder Snippet call looks like this:

[[!Wayfinder? &startId=`55`
&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&firstClass=`my_first_class`
&lastClass=`my_last_class`
&rowClass=`my_row_class`
&outerClass=`my_outer_class`
]]

Sample Output

And here's what our sample output looks like:

<!-- outerTpl -->
<ul id="topnav" class="my_outer_class">
        <!-- rowTpl -->
        <li class="my_row_class my_first_class"><a href="media-hub/news" title="HG in the News" >HG in the News</a></li>
        <!-- rowTpl -->
        <li class="my_row_class"><a href="media-hub/events" title="HG Events" >HG Events</a></li>
        <!-- rowTpl -->
        <li class="my_row_class"><a href="media-hub/press" title="Press Releases" >Press Releases</a></li>
        <!-- rowTpl -->
        <li class="my_row_class"><a href="media-hub/blog/" title="HG Blog" >HG Blog</a>

                <!-- outerTpl -->
                <ul id="topnav">
                        <!-- rowTpl -->
                        <li class="my_row_class my_first_class">
                                <a href="media-hub/blog/test-section/" title="Blog Test Section" >Blog Test Section</a>

                                <!-- outerTpl -->
                                <ul id="topnav">
                                        <!-- rowTpl -->
                                        <li class="my_row_class my_first_class"><a href="media-hub/blog/test-section/test-post" title="Test Post" >Test Post</a></li>
                                        <!-- rowTpl -->
                                        <li class="my_row_class"><a href="media-hub/blog/test-section/other-post" title="Other Post" >Other Post</a></li>
                                        <!-- rowTpl -->
                                        <li class="my_row_class my_last_class"><a href="media-hub/blog/test-section/third-post" title="Third Post" >Third Post</a></li>
                                </ul>
                        </li>

                        <!-- rowTpl -->
                        <li class="my_row_class my_last_class"><a href="media-hub/blog/archives" title="Blog Archives" >Archives</a></li>
                </ul>
        </li>
        <!-- rowTpl -->
        <li class="my_row_class"><a href="media-hub/fast-facts" title="HG Fast Facts" >HG Fast Facts</a></li>
        <!-- rowTpl -->
        <li class="my_row_class"><a href="media-hub/publications" title="HG Publications" >HG Publications</a></li>
        <!-- rowTpl -->
        <li class="my_row_class my_last_class"><a href="media-hub/media-contact" title="Media Contact" >Media Contact</a></li>
</ul>

Notice how the first and last links got two classes? The "my_row_class" is added to all rows, and the first and last items get the "my_first_class" or "my_last_class" respectively in addition to the "my_row_class".

Remember: if you want to take advantage of these parameters, make sure you include
the [[+wf.attributes]] placeholder inside your Chunks!!!

Conclusion

Hopefully these illustrations have helped you understand how the various Chunks fit together to create a fully-customizable menu.

Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).