Rendering a menu

Using Neos & Flow Frontend & Integration
1

Hello together,

i’m trying to create a navigation for my website using an already existing template. It seems like they do have an unusual hierarchy, because items and subitems and subsubitems are not stacked and i’m struggling to combine them.

E.g. we do have something as: (example, not the actual used code)

<header-navigation>
	<header-navigation-item toggle="item-with-subitems">
		Item with Subitems
	</header-navigation-item>

	<header-navigation-item href="/subitems">
		No Subitems
	</header-navigation-item>
</header-navigation>

<header-subitems-container>

<header-navigation-level-2 class="item-with-subitems">
	<header-navigation-level-2-item>
		I'm a fancy subitem.label
	</header-navigation-level-2-item>
	<header-navigation-level-2-item toggle="item-with-subsubitems">
		I'm a fancy subitem.label
	</header-navigation-level-2-item>
</header-navigation-level-2>


<header-navigation-level-3 class="item-with-subsubitems">
	<header-navigation-level-3-item>
		I'm a fancy subsubitem.label
	</header-navigation-level-2-item>
	<header-navigation-level-3-item>
		I'm a fancy subsubitem.label
	</header-navigation-level-3-item>
</header-navigation-level-3>

</header-subitems-container>

As they don’t stack, e.g. they are not combined such as like:

<header-navigation>
	<header-navigation-item toggle="item-with-subitems">
		Item with Subitems
		<header-navigation-level-2 class="item-with-subitems">
			I'm a fancy subitem.label
			<header-navigation-level-2-item toggle="item-with-subsubitems">
				<header-navigation-level-3 class="item-with-subsubitems">
					<header-navigation-level-3-item>
						I'm a fancy subsubitem.label
					</header-navigation-level-2-item>
				</header-navigation-level-3>
			</header-navigation-level-2-item>
		</header-navigation-level-2>
	</header-navigation-item>
</header-navigation>

i do struggle on finding a rendering logic.

To begin with, i’ve created a Header.fusion that currently works that way:

<my.Vendor:Presentation.Header.DesktopMainNavigation /> (Contains the part of the header-navigation element)

<header-container>
	<my.Vendor:Presentation.Header.DesktopSecondLevelNavigation /> (Contains the part of the header-navigation-level-2 element)
	<my.Vendor:Presentation.Header.DesktopThirdLevelNavigation /> (Contains the part of the header-navigation-level-3 element)
</header-container>

I hope you got what i’ve meant from my example :sweat_smile:

How could it takle this in the best case? Usually i’m looping trough the elements, using logics such as <Neos.Fusion:Loop items={props.menuItems} itemName="item"[...] and then <Neos.Fusion:Loop items={item.subItems}[...]

However, in this case my brain is stuck - as i don’t know all the ways on how to render a menu. Maybe you do have a hint for me?

Thanks a lot in advance! :slight_smile:

2

I think i’ve removed my brain in stuck-mode, as the Loop was actually working. It is not as complex as i thought.

My usual approach stacking the Loop and just look where subItems exist, and then some operations such as @if.has={${q(item.node).is('[instanceof Neos.Neos:Shortcut]')}} did the trick to me.

I’m anyway looking for some best practices (e.g. organizing the elements, seperation of concerns etc.), as i don’t think my code looks that clean right now.

For every comment i’m happy, but i think this topic is solved for me :slight_smile: