Deep menu level rendering in Neos 8.3.3

Using Neos & Flow Frontend & Integration
1

Hello together,

i want to render a menu and i’m having the following tree inside Neos 8.3.3:

image

By using afx, i’m having the following code that renders some levels, but only until the level of Projects:

prototype(Vendor.Neos:Header.MenuFlyout) < prototype(Neos.Fusion:Component) {
    menuItems = Neos.Neos:MenuItems
    renderer = afx`
        <Neos.Fusion:Loop items={props.menuItems} itemName="item" iterationName="iterator">        
                      <h3>{item.label}</h3>
                        <ul>
                            <li>
                                <a href={"/" + item.node.properties.uriPathSegment}>
                                        <span>{item.node.properties.title}</span>
                                </a>
                            </li>
                            <Neos.Fusion:Loop items={item.subItems} itemName="subItem">
                                <li>
                                    <a href={"/" + item.node.properties.uriPathSegment + "/" + subItem.node.properties.uriPathSegment}>
                                            <span>{subItem.node.properties.title}</span>
                                    </a>
                                </li>
                            </Neos.Fusion:Loop>
                        </ul>
        </Neos.Fusion:Loop>
    `
}

(I removed lots of css classes, lines and javascript to make it more easy to read, i hope it wasn’t to much)

As you might see inside the code, it only renders until Projects (and all other items of level 2) as i’m fetching subItems from item. How can i also access the items and their properties inside subItems (Projects)?

I thought about changing into something like that:

<Neos.Fusion:Loop items={item.subItems} itemName="subItem">
	<b> {subItem.node.properties.title} </b> <-- Working

<!-- this part is new -->
	<Neos.Fusion:Loop items={subItem.subItems} itemName="subItemItem">
		<b> {subItemItem.node.properties.title} </b>
	</Neos.Fusion:Loop>
<!-- end of new part -->

</Neos.Fusion:Loop>

But of course my attempt didnt’t work :frowning:

Do you know how and where i can look to get more details and knowledge about this? Or maybe a direct solution whould be amazing.

Thank you!

2

i think you can specify a depth for this prototype :wink:

… yes its maximumLevels = 2 by default

1 Like
3

@Marc

Oh wow, that was exactly the issue :smiley:

I didn’t knew about the default maximumLevels set to two.

Thanks a lot!

I will mark your answer as solution but this brought me to a new challenge. I’m creating kind of a landing page. By using Neos.Neos:NodeLink it seems like it is rendered perfectly with the path from the landingpage, which is “landing”:

<Neos.Neos:NodeLink attributes.id={"nav-item-" + (iterator.index)} node={item.node} @if.render={!(item.subItems) && item.node.properties.isMenuVisible} attributes.class={item.state == 'current' ?  "nav__control highlight" :"nav__control"}>{item.label}</Neos.Neos:NodeLink>

But the menus below are rendered like this:

<a class={(item.state == 'current') ? "nav-link nav-link--highlight" : "nav-link "} href={"/" + item.node.properties.uriPathSegment}>
   <span class={(item.state == 'current') ? "nav-item nav-item--highlight" : "nav-item "}>
      <span class="nav-item-label">
         {item.node.properties.MenuText ? item.node.properties.MenuText : item.node.properties.title}
      </span>
   </span>
</a>

Which gives me a tree like:

Home (Landingpage): domain.xxx/
– Website 1: domain.xxx/landing
— News: domain.xxx/landing/news
----- Projects: domain.xxx/news/projects

I’m kinda sure the problematic part is that i’m not using Neos.Neos:NodeLink in the second code. But i’m not sure how i can implement it the way with Neos.Neos:NodeLink.

Is it possible? :slight_smile:

4

Okay i’ve change it to:

<Neos.Neos:NodeLink node={item.node} attributes.class={item.state == 'current' ?  "_nav-link nav-link--highlight" :"flyout__nav-link"}>
<span class={(item.state == 'current') ? "nav-item nav-item--highlight" : "nav-item "}>
<span class="nav-item-label">
{item.node.properties.MenuText ? item.node.properties.MenuText : item.node.properties.title}
</span>
</span>
</Neos.Neos:NodeLink>

I think that did the trick :smiley:

Thanks! :slight_smile: