Three layer submenu in Bolt CMS

Question

I have been stuck trying to implement a three layered submenu in Bolt. I want the menu to only display the top tier, unless that is selected in the menu, at which point, I want only the second tier to be shown. If a menu option in the second tier is selected, I would like only the submenu for that selection to show. So far, I have tried this:

{% for item in menu %}

<li class="{% if item|current %}active{% endif %}">
    <a href=" {{ item.link }}" {% if item.title is defined %}title='{{ item.title|escape }}'{% endif %}
       class='{% if item.class is defined %}{{item.class}}{% endif %}'>
         {% if item.submenu is defined and item|current %} <i class='fa fa-lg fa-caret-down'></i> {% elseif item.submenu is defined and not item|current %}<i class='fa fa-lg fa-caret-right'></i>{% endif %}
        {{item.label}}
    </a>
</li>
{% if item.submenu is defined  and item|current %}
    <ul class="nav nav-level2">
          {% for item in item.submenu %}
            <li {% if item|current %}class='active' {% endif %}>
                <a href="{{ item.link }}" {% if item.title is defined %}title='{{ item.title|escape }}'{% endif %}>
                    {{item.label}}
                </a>
            </li>
            {% if item.submenu is defined%}
                {% if item|current %}
                  <ul class='nav nav-level3'>
                    {% for item in item.submenu %}
                    <li class='{% if item|current %}active{% endif %}'>
                        <a href="{{ item.link }}" {% if item.title is defined %}title='{{ item.title|escape }}'{% endif %}>
                            {{item.label}}
                        </a>
                    </li>
                    {% endfor %}
                  </ul>
              {% endif %}
            {% endif %}
        {% endfor %}
    </ul>
{% endif %}

{% endfor %}

My menu in the config.yml is structured as:

_sample menu:
  - label: First Section
    path: First_Section_Path
  - label: Second Section
    path: second_section_path
    submenu:
      -label: Second tier 
       path: second_tier_path
       submenu:
         -label: Third tier
         -path: third_tier_path
  - label: Third Section
    path: third_section_path

Is there a better way to do this? Or am I just missing something obvious?

Thank you in advance for your help.

Answer 1

The default theme uses a macro. https://github.com/bolt/bolt/blob/master/app/theme_defaults/_sub_menu.twig

If you want to limit your result depth you can pass a parameter through the macro increment it and stop it from recursing.