Typo3 Fluid DirectoryViewHelper: Highlight current page in menu - menu

Question

i am using the Mittwald Typo3 Starterkit (Online-Demo). I figured out that this Starterkit uses the Typo3 fluid directory helper. How can one specify a specific CSS class for an active/selected page (I want to highlight the current page in the menu)?
Until now, I realised my Menus using Typo3 (HMENU/TMENU/ACT) but with this fluid directory helper I am completely stuck.
According to the Fluid Documentation there might be 2 ways:
classActive/classCurrent (string)
linkActive/linkCurrent (boolean)
The original code is:
<!-- mainmenu begin -->
<ce:menu.directory pageUids="{0: '{mainMenuStartingPid}'}" as="pages" levelAs="level" maximumLevel="2">
<f:if condition="{pages}">
<ul id="{f:if(condition:'{mainMenuClass}',then:'c{mainMenuClass}',else:'mainmenu')}">
<f:for each="{pages}" as="page">
<li>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
<!-- mainmenu close -->
My try which did not work (class "current" did not appear, if condition linkCurrent is not executed):
<!-- mainmenu begin -->
<ce:menu.directory pageUids="{0: '{mainMenuStartingPid}'}" as="pages" levelAs="level" maximumLevel="2">
<f:if condition="{pages}">
<ul id="{f:if(condition:'{mainMenuClass}',then:'c{mainMenuClass}',else:'mainmenu')}">
<f:for each="{pages}" as="page">
<f:if condition="{linkCurrent}">
<li class="current">
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:if>
<f:else>
<li>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:else>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
<!-- mainmenu close -->
Does anyone have an idea how this fluid directory helper works? Unfortunately, there are few examples around. Thank you a lot!

Answer 1

Note, the ce:menu.directory ViewHelper is not the same as the linked VHS Menu DirectoryViewHelper.
The ce: prefix is usually used by FluidStyledContent ViewHelpers, that also have menu viewhelpers.
If you want to know what properties each page row has available, you should use the f:debug ViewHelper to inspect the variable.
<f:debug>{page}</f:debug>
I have not tried that ViewHelper, ever, but it looks like it does not insert any information about, if it's the current page or if it's "active" (in rootline) like you're used to from HMENU content objects.
You might want to replace that ViewHelper with the VHS extensions menu ViewHelper.

Answer 2

You can use the following snippet to add a class to the active page,
I used an inline if to compare the data.pid with the page.data.uid here.
<!-- mainmenu begin -->
<ce:menu.directory pageUids="{0: '{mainMenuStartingPid}'}" as="pages" levelAs="level" maximumLevel="2">
<f:if condition="{pages}">
<ul id="{f:if(condition:'{mainMenuClass}',then:'c{mainMenuClass}',else:'mainmenu')}">
<f:for each="{pages}" as="page">
<!-- new inline if here -->
<li{f:if(condition: '{data.pid}=={page.data.uid}', then: ' class="current"', else: '')}>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
<!-- mainmenu close -->