Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Rendering manual menus with VHS
<div xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<!-- By setting the "as" argument, we create a new variable accessible inside tag content -->
<v:page.menu as="myMenuVariable">
<ol class="mySpecialMenu">
<f:for each="{myMenuVariable}" as="menuPage">
<li>
<!-- A few key properties are added on {menuPage} for user friendliness -->
<!-- These are: "linktext", "link", "active", "current", "hasSubPages" -->
<f:if condition="{menuPage.current}">
<f:then>
<!-- Special rendering of "current" page title as raw text -->
{menuPage.linktext}
<!-- And with a conditional next level menu using auto rendering: -->
<f:if condition="{menuPage.hasSubPages}">
<v:page.menu pageUid="{menuPage.uid}" />
</f:if>
</f:then>
<f:else>
<!-- There are two common methods of rendering the page links: -->
<!-- Using f:link.page which will re-create the "link" HREF -->
<f:link.page pageUid="{menuPage.uid}" class="{menuPage.class}">{menuPage.linktext}</f:link.page>
<!-- Or with manual link tags using pre-built "link" HREF -->
<a href="{menuPage.link}" class="{menuPage.class}">{menuPage.linktext}</a>
</f:else>
</f:if>
</li>
</f:for>
</ol>
</v:page>
<!-- Note that the {myMenuVariable} no longer exists since the variables are cleaned after tag finishes -->
</div>
@abteilung

This comment has been minimized.

Copy link

@abteilung abteilung commented Dec 4, 2014

Just noticed an error in the closing </v:page>. Should be </v:page.menu>.
Also, I would comment out one of the two ways to render the page links. The double rendering of page links was confusing to me at first.

@Outdoorsman

This comment has been minimized.

Copy link

@Outdoorsman Outdoorsman commented Apr 17, 2018

Just a comment for more recent versions of VHS

  1. v:page.menu is deprecated so use v:menu
  2. hasSubPage no longer works like it used so here an alternative...

In place of

<f:if condition="{menuPage.hasSubPages}">

Instead now use...

<v:variable.set name="hasSub" value="{v:condition.page.hasSubpages(then: 'TRUE', else: 'FALSE', pageUid: '{item.uid}', includeHidden: 0, showHiddenInMenu: 0)}" />
                    <f:if condition="{hasSub} =='TRUE' ">

(I found this info from a comment by Rob De Vries in the #fluidtypo3 channel in TYPO3's Slack)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment