3 Level Deep Timber menu (Wordpress)

Question

I'm not familiar with timber at all, but am helping a friend finish up a project that was built with it. So any help would go a long way please!

I have only the first two tiers showing up. Is there a way to call on the child of a child?

I'm using the code here, and added to it another tier under child https://timber.github.io/docs/guides/menus/

{% if menu %}

<div class="header-menu-items">

  <div class="header-menu-item mod-title">
    <a href="{{ site.url }}" class="" rel="home">
      <div class="header-item-logo">
        <div class="sitelogo">{{ site.name }}</div>
      </div>
    </a>
  </div>

  {% for item in menu.get_items() %}
    <div class="header-menu-item {{ item.current ? 'is-active' : '' }}">

      <div class="header-menu-item-link">
        <a target="{{ item.target }}" href="{{ item.link }}">{{ item.title }}</a>
      </div>

      <div class="header-menu-item-triangle"></div>

      <div class="header-menu-item-mega {{ item.section_colour ? " mod-#{item.section_colour}" : '' }}">

        {% if item.master_object.thumbnail %}
          <div class="mega-image mod-image" style="background-image: url( {{item.master_object.thumbnail.src('thumbnail') }} )">
        {% else %}
          <div class="mega-image">
        {% endif %}
          {{ item.title }}
        </div>

        <div class="mega-items">
          {% for child in item.children %}
            <div class="mega-item">
              <a target="{{ child.target }}" href="{{ child.link }}">
                <span class="mega-item-title">{{ child.title }}<br /></span>
                <span class="mega-item-excerpt">Mega menu description lorem ipsum dolores</span>
              </a>
            </div>
            {% for child in child.children %}
               Just testing to see if it'll even show up first before applying style<br />
               {{ child.title }}<br />
            {% endfor %}
          {% endfor %}
        </div>
      </div>


    </div>
  {% endfor %}

</div>
{% endif %}

Answer 1

You can access menus several layers deep by nesting for loops inside of one another. Here is a code snippet that I have tested and works.

{% for item in menu__main.items %} {# This is the top level #}
  <p>{{ item }}</p>

  {% if item.children %}
    {% for child in item.children %} {# 2nd Level #}
      <p><em>{{ child }}</em></p>

      {% if child.children %}
        {% for third in child.children %} {# 3rd Level #}
          <p><strong>{{ third }}</strong></p>
        {% endfor %} {# for third in child.children #}
      {% endif %} {# if child.children #}

    {% endfor %} {# for child in item.children #}
  {% endif %} {# if item.children #}
{% endfor %} {# for item in menu__main.items #}

I have added comments to the end of the lines to hopefully make this more clear. So at the top, you are looping through item in menu__main.items

Then to get the children inside of these, you loop through item.children since item is the variable that represents each nav item at the top/main level. You loop through item.children to get to the next level or the children inside of the main/top level.

Then to get inside of the third level, you loop through child.children since child is the variable that represents the 2nd level. We want to loop through the children of this 2nd level. so we do third in child.children. third is the variable that represents the items 3 levels down.

I hope you can see the pattern here and you can continue this even further if you have items at even deeper levels, although at some point it will probably get ridiculous. Like if you have items nested 5 or 6 levels deep.

Let me know if that makes sense and if not I will be more than happy to try and explain it another way if you still have questions.

Cheers