Rendering a Meta-Navigation

To render a meta navigation (ex: footer navigation) in Neos all you need to use is Fusion and HTML.

A common fact is that most sites have footer where all pages are using the same content or information. So a common issue is how to solve this in the best possible way.

VendorName.VendorSite/Resources/Private/Fusion/Root.fusion

Fusion code:

page.body {
    metaMenu = Menu
    metaMenu {
        entryLevel = 2
        templatePath = 'resource://VendorName.VendorSite/Private
        /Templates/FusionObjects/MetaMenu.html'
        maximumLevels = 1
        startingPoint = ${q(site).children('[uriPathSegment="metamenu"]').get(0)}
    }
}

The first thing that we define inside the page.body is a Menu object that is called metaMenu. The options available in this example is:

• entryLevel: On which level in the page structure the menu should start.

• templatePath: The path to the template where the rendering is done.

• maximumLevels: How many levels the menu can show.

• startingPoint: The starting point of the menu, in this case the node with name ‘nameOfNode’ is the starting point.

HTML template code:

{namespace neos=Neos\Neos\ViewHelpers}
<nav class="nav">
    <ul class="nav nav-pills">
        <f:for each="{items}" as="item" iteration="menuItemIterator">
            <li class="{item.state}">
                <neos:link.node node="{item.node}" />
            </li>
        </f:for>
    </ul>
</nav>

What is done is first to include a view helper to be able to link to nodes inside the HTML. The namespace in the example is neos to clarify from where the viewhelper is taken.

Viewhelper include:

{namespace neos=Neos\Neos\ViewHelpers}

The next thing is to iterate through the nodes found by Fusion.

Iterating through nodes:

<f:for each="{items}" as="item">
    ...
</f:for>

What then is done inside the iteration is that first we wrap our node with a li tag with a class called menu-item. Then we use our view helper to (which namespace is neos that is clarified) link it to a node in Neos. The linking is set in the parameter node, the you can choose what should be shown as a text for the link. In this case the label (default) of the node is the text.

Wrapping and linking of node:

<li class="{item.state}">
    <neos:link.node node="{item.node}" />
</li>

The last thing to do is to include the meta menu to our page layout(s).

Include meta menu:

{parts.metaMenu -> f:format.raw()}