I have a dropdown menu which uses the static pages menu to generate the navigation.

<ul class="nav navbar-nav navbar-right">
    <li><a href="{{ '/'|app }}"><i class="typcn typcn-home"></i></a></li>
    {% for item in items %}
    <li class="{{ item.isActive or item.isChildActive ? 'active' : '' }}  {{ item.items ? 'dropdown' : '' }}">
        <a title="{{ item.title }}" {% if item.items %} class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-     expanded="false" href="#"{% else %} href="{{ item.url }}" {% endif %}>{% if item.items %} {{ item.title }} <span class="caret"></span>{% else %} {{     item.title }} {% endif %}</a>
            {% if item.items %}
            <ul class="dropdown-menu">
            {% for subitem in item.items %}
            <li>
            <a href="{{ subitem.url }}">{{ subitem.title }}</a>
            </li>
            {% endfor %} 
            </ul>
           {% endif %}
            </li>
    {% endfor %}
     <li><a id="search" data-toggle="modal" data-target=".search-modal"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>

How do I reference third level items? Here is a picture explaining a typical layout http://i.imgur.com/6SbxEJe.png

I know bootstrap doesn't allow 3rd level menu without mods but its the the twig calls I am trying to work out.

Many thanks!

You should have the third level in

subitem.items

inetis said:

You should have the third level in

subitem.items

Thank you very much, that works perfectly :)

Hello, I'm a developer beginning with october. Could you be more explicit with your solution, I only see two levels of menu ? Thanks a lot

Incremental said:

Hello, I'm a developer beginning with october. Could you be more explicit with your solution, I only see two levels of menu ? Thanks a lot

Hi Incremental. Hazard made me come here (I'm searching for a bulma implementation).

More explicit explanation: In Static Page menu builder, each level contains "items" property which is a container for each child-level item.

So in the Stranger Pings code:

• The first loop access the root items to parse each item.
• The second level access item.items to parse each subitem. (children of first-level items)
• Logically, to add a third level you need to create a loop on subitem to parse each subsubitem. (children of second-level items)
• And you can go this way infinitely deep.

Final code of Stranger Pings would be:

<ul class="nav navbar-nav navbar-right">
    <li><a href="{{ '/'|app }}"><i class="typcn typcn-home"></i></a></li>
    {% for item in items %} // FIRST LEVEL HERE
    <li class="{{ item.isActive or item.isChildActive ? 'active' : '' }}  {{ item.items ? 'dropdown' : '' }}">
        <a title="{{ item.title }}" {% if item.items %} class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-     expanded="false" href="#"{% else %} href="{{ item.url }}" {% endif %}>{% if item.items %} {{ item.title }} <span class="caret"></span>{% else %} {{     item.title }} {% endif %}</a>
            {% if item.items %}
            <ul class="dropdown-menu">
            {% for subitem in item.items %} // SECOND LEVEL HERE
            <li>
            <a href="{{ subitem.url }}">{{ subitem.title }}</a>
            </li>
                {% if subitem.items %}
                    <ul>
                        {% for subsubitem in subitem.items %} // THIRD LEVEL HERE
                        <li>
                        <a href="{{ subsubitem.url }}">{{ subsubitem.title }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endfor %} 
            </ul>
           {% endif %}
            </li>
    {% endfor %}
     <li><a id="search" data-toggle="modal" data-target=".search-modal"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>

Last updated 5 years ago

Thanks a lot for your useful help. Now I'm struggling with backend form validation... (other post)