As mentioned in the previous post the standard menu viewhelper is a Fluid equivalent to the HMENU object in TypoScript. All other menu objects you know from TS are implemented as well with <v:page.breadcrumb />, <v:page.menu.list />, <v:page.menu.browse /> and <v:page.menu.directory />. Again, here are some examples.

List menu

A list menu only contains those pages you provide via the pages argument which can be a CSV list or an array of page UIDs or any object that implements Traversable interface. All other arguments mentioned previously for the standard menu viewhelper are valid here as well:

<nav>
    <v:page.menu.list pages="2,3,4"/>
</nav>

Assuming our pagetree from the previous post this would result in:

<nav>
    <ul>
        <li><a href="index.php?id=2" title="Page A">Page A</a></li>
        <li><a href="index.php?id=3" title="Page B">Page B</a></li>
        <li><a href="index.php?id=4" title="Page C">Page C</a></li>
    </ul>
</nav>

This menu type is useful for example in footer menus where pages like 'Imprint', 'Terms' or the like which according to a given design may not be linked in the main menu can be placed by adding showHidden="TRUE".

Browse menu

Browse menus render links to let the user step through pages of a subtree of the currently selected page. The resulting links are 'first', 'last', 'previous', 'next' and 'up' and can be configured regarding visibility and their labels. We can control if 'first', 'last' or 'up' should be rendered and if the according page titles should be used for labeling instead of the default labels (which can be overriden of course). Again, all arguments for the standard menu viewhelper apply too. Here's an example:

<v:page.menu.browse labelFirst="to first" labelLast="to last" labelUp="go up" classFirst="first" classLast="last" />

Resulting in the rendered markup for page 'Subpage 3' (id=11):

<ul>
    <li class="first"><a href="/index.php?id=9" title="Subpage 1" class="first">to first</a></li>
    <li><a href="/index.php?id=10" title="Subpage 2">previous</a></li>
    <li class="active sub"><a href="/index.php?id=3" title="Page 1" class="active sub">go up</a></li>
    <li><a href="/index.php?id=12" title="Subpage 4">next</a></li>
    <li class="last"><a href="/index.php?id=13" title="Subpage 5" class="last">to last</a></li>
</ul>

Directory menu

Directory menus - like list menus - take a number of page UIDs and include all child pages of those into one menu. As you might have guessed all arguments of the standard menu viewhelper apply here as well:

<v:page.menu.directory pages="3" classFirst="first" classLast="last" />

Resulting in:

<ul>
    <li class="first"><a href="/index.php?id=9" title="Subpage 1">Subpage 1</a></li>
    <li><a href="/index.php?id=10" title="Subpage 2">Subpage 2</a></li>
    <li class="active current"><a href="/index.php?id=11" title="Subpage 3" class="active current">Subpage 3</a></li>
    <li><a href="/index.php?id=12" title="Subpage 4">Subpage 4</a></li>
    <li class="last"><a href="/index.php?id=13" title="Subpage 5">Subpage 5</a></li>
</ul>

Breadcrumb menu

This is the classic. Here especially the arguments linkCurrent and linkActive can be useful to fine tune the rendering according to your design. It goes without saying that the standard arguments apply. Again.

<v:page.breadCrumb linkCurrent="FALSE" class="breadcrumb" classFirst="first" classLast="last" />

Resulting markup:

<ul class="breadcrumb">
    <li class="active sub first"><a href="/index.php?id=14" title="Home" class="active sub first">Home</a></li>
    <li class="active sub"><a href="/index.php?id=3" title="Page 1" class="active sub">Page 1</a></li>
    <li class="active current last">Subpage 4</li>
</ul>

As you can see the curently selected page is not linked. To control the depth or length of the breadcrumb menu we can set endLevel to the desired value which can come in handy at times.

I will try to come up with more usage examples for the FluidTYPO3 family of extensions in the near future so stick around. For questions visit us on IRC (Freenode), channel #fedext.

comments powered by Disqus