Recursive page menu using VHS

Example for creating a menu with vhs:page.menu in a recursive way. Just set a start page and the whole tree gets rendered.

Description Recursive Menu Generator using Vhs Page Menu
Author coding46
Creation date 2014-09-20T21:58:19.000Z
Extensions
  1. FluidTYPO3.Vhs
  2. FluidTYPO3.Fluidpages
Tags
  1. ViewHelpers
Files
  1. Partials-MenuRecursion.html
  2. Templates-Page.html
<div xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="MenuRecursionStep">
<f:if condition="{currentPage.hasSubPages}">
<v:page.menu pageUid="{currentPage.uid}">
<f:if condition="{menu}">
<ul>
<f:for each="{menu}" as="currentSubPage">
<li class="{currentSubPage.class}">
<v:page.link pageUid="{currentSubPage.uid}" />
<f:render section="MenuRecursionStep" arguments="{currentPage: '{currentSubPage}'}" />
</li>
</f:for>
</ul>
</f:if>
</v:page.menu>
</f:if>
</f:section>
<f:section name="MenuRecursionStart">
<v:page.menu pageUid="{recursionStartPageUid}">
<f:if condition="{menu}">
<ul>
<f:for each="{menu}" as="startLevelPage">
<li class="{startLevelPage.class}"><v:page.link pageUid="{startLevelPage.uid}" />
<f:render section="MenuRecursionStep" arguments="{currentPage: '{startLevelPage}'}"/>
</li>
</f:for>
</ul>
</f:if>
</v:page.menu>
</f:section>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Page" />
<f:section name="Main">
<f:render partial="MenuRecursion" section="MenuRecursionStart" arguments="{recursionStartPageUid: '1'}"/>
</f:section>
</div>
view raw Templates-Page.html hosted with ❤ by GitHub