Typo3 menu for Fluidpages Templating with VHS ViewHelper

For many years the typoscript HMENU has done a really good job in building a site menu in Typo3 websites and it still does. Sometimes though it happened that I got into trouble, because of the lack of flexibility this traditional way of building menus has. A while ago I started using the fantastic Fluidtemplates Extension for Typo3 templating and found a new – much more flexible – way of building menus.

Apart from a lot of useful additions to the basic Fluid ViewHelpers, the Extensions VHS also provides a Menu-ViewHelper. The advantage in using a VHS-Menu is that you write your HTML markup of the menu and use fluid and vhs viewhelpers in it. If that’s not enough you can still create your own custom viewhelpers.

The setup requires some extensions to be installed: flux, fluidtemplates, vhs. The following code snippet shows a basic two-level menu that i use in my Fluidtemplates templates.

The menu markup will be placed in a partial. It’s important to define the namespace for the vhs viewhelpers at the top of the HTML file:

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<nav class="nav-main">
  <v:page.menu.directory pages="{v:variable.typoscript(path:'PIDS.ROOT')}">
    <ul class="first-level">
      <f:for each="{menu}" as="menuPage" iteration="iteration">
        <li class="{menuPage.class}" id="page-id-{menuPage.uid}">
          <a href="{menuPage.link}">{menuPage.title}</a>
          <f:if condition="{iteration.isLast}">
            <f:else><span class="icon-nav-spacer"></span></f:else>
          </f:if>
          <f:if condition="{menuPage.hasSubPages}">
            <ul class="second-level">
              <v:page.menu pageUid="{menuPage.uid}" classActive="active" as="submenu">
                <f:for each="{submenu}" as="subMenuPage">
                  <li><a class="{subMenuPage.class}" href="{subMenuPage.link}">{subMenuPage.title}</span></a></li>
                </f:for>
              </v:page.menu>
            </ul>
          </f:if>
        </li>
      </f:for>
    </ul>
  </v:page.menu.directory>
</nav>

This partial will then be included in the main template as any other partial and placed at the desired position:

<f:render partial="Nav/MainNav" />

Note that the menu.page.directory viewhelper as an attribute pages to define the entrypoint (pageUid) of your menu. I usually set this pageUid in my Typoscript-Setup(not only constants) with the name PIDS.ROOT and get it in the vhs menu with another vhs viewhelper named variable.typoscript:

{v:var.typoscript(path:'PIDS.ROOT')}

The advantages of this menu are the following:

• Use fluid conditions to add menu item spacers e.g.
• Access all possible page properties
• Use your custom viewhelpers