Let’s say you want to render the navigation in your page template (could be anywhere) like this:
{navigation -> f:format.raw()}
Then you would have to define that in the page fusion. In my case it looks like this:
navigation = Your.Site:Component.Navigation {
startingPoint = ${site}
}
Passing the site as the starting point gets all items below the root/home page. You can use a flowquery to pass any other page as the root for the navigation. When using shortcuts this usually makes sense, for example if you identify that root page node or root shortcut node (which contains your menu shortcuts) via uri path segment, this flowquery could be used:
startingPoint = ${q(site).find('[instanceof Neos.Neos:Document][uriPathSegment = navigation]').get(0)}
The fusion of the navigation component could look like this:
prototype(Your.Site:Component.Navigation) < prototype(Neos.Fusion:Component) {
@context.node = ${this.startingPoint}
navigationItems = Neos.Fusion:Collection {
collection = ${q(node).children('[instanceof Neos.Neos:Document][_hidden != TRUE][_hiddenInIndex != TRUE][hideFromMainMenu != TRUE]')}
@if.notEmpty = ${this.collection.count() > 0}
itemName = 'node'
itemRenderer = Your.Site:Component.NavigationItem
}
renderer = afx`
<nav class="site-navigation">
<ul>
{props.navigationItems}
</ul>
</nav>
`
}
And the fusion of the navigation item component (what i called Navigation.ItemRenderer earlier):
prototype(Your.Site:Component.NavigationItem) < prototype(Neos.Fusion:Component) {
node = ${node}
itemClass = Neos.Fusion:RawArray {
base = 'site-navigation__item'
current = 'site-navigation__item--state-current'
current.@if.isCurrent = ${node == documentNode || String.indexOf(q(node).property('target'), documentNode.identifier) > -1}
}
renderer = afx`
<li class={props.itemClass}>
...
</li>
`
}
Here in itemClass you see the condition which checks if the item is active/current. It sets the class site-navigation__item--state-current if the condition is true (its the current page node OR its the shortcut pointing to the current page).
Hope this helps, it’s a simplified example to illustrate the used pattern.
Check for example https://github.com/code-q-web-factory/Neos-Skeleton to find a more complete implementation of this pattern (excluding the adjustment for checking if shortcut is active), also including multi-level menus.
