Hiding the first level nav item when there are subitems without jquery

I just started with neos a short while ago and I am now creating my first site package using boostrap 4.
I have the following site structure:

–> subtestsite1
–> subtestsite2

and so on.
I’ve made my menu using the following fluid template:

 {namespace neos=Neos\Neos\ViewHelpers} {namespace ts=Neos\Fusion\ViewHelpers}
<!-- render the navbar itself with the "section" element in it -->
<ul{attributes -> f:format.raw()} class="navbar-nav ml-auto">
  <f:render section="itemsList" arguments="{items: items}" />

  <!-- render the navbar content -->
  <!-- first level -->
  <f:section name="itemsList">
    <f:for each="{items}" as="item">
      <li {ts:render(path: '{item.state}.attributes', context: {item: item}) -> f:format.raw()}>
        <neos:link.node node="{item.node}">{item.label}</neos:link.node>
        <!-- second level, show dropdown-->
        <f:if condition="{item.subItems}">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle waves-effect" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{item.label} </a>
            <ul class="dropdown-menu animated fadeInDown" aria-labelledby="navbarDropdownMenuLink" role="menu">
              <f:render section="itemsList" arguments="{items: item.subItems}" />

If I now render the page, a dropdown containing the subitems shows up - however the “normal” nav item is still there:

This is what I want to achieve:

This is how I did it for now using jquery:

//hide the not needed element before every dropdown-menu
$( ".navbar li.nav-item.dropdown" ).prev().css( "display", "none" );

How can I do this “the correct way”? How can I hide the “normal” nav item using fluid/fusion if it has subitems?

Thanks for any help,


Seems to me this is a HTML/CSS issue?

You render one <li> too much inside of the subitems condition. I guess that one is superfluous and the classes should rather be applied to the <li> hat comes directly inside the <f:for>

Oh, jup, just noticed that as well, thanks. Sorry for the late answer, I will post the final code here once it is done.