Loop to add children pages as dropdown

Archive
1

Howdy all.
I’m a pretty new Grav user and I came across this for-loop in the theme tutorial for adding top-level pages to a menu. How would I alter this so that it grabs the children of a specific top-level pages and dumps it in a dropdown list (I’m using a Bootstrap navbar if that helps any)? Or could I perhaps have nested loops that grabs the top-level stuff, then iterates through the children? Whichever is the best implementation!

Thanks!

From the theme tutorial:
— html


    {% for page in pages.children %}
    {% if page.visible %}
    {% set current_page = (page.active or page.activeChild) ? ‘active’ : ‘’ %}
  • {{ page.menu }}

    • {% endif %}
    {% endfor %}

2

Have you looked at the skeleton sites? For example, the “Photographer Site” has a working submenu. You can see the code in the navigation.html.twig partial. You have to put a child loop within your parent loop.

{% macro loop(page) %}
    {% for p in page.children %}
        {% if p.visible %}
            {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
            <li class="{{ current_page }}">
                <a href="{{ p.url }}">
                    {{ p.menu }}
                </a>
                {% if p.children.count > 0 %}
                    <ul>
                        {{ _self.loop(p) }}
                    </ul>
                {% endif %}
            </li>
        {% endif %}
    {% endfor %}
{% endmacro %}
 
<ul class="nav sf-menu">
    {% if config.themes.photographer.dropdown.enabled %}
        {{ _self.loop(pages) }}
        {% else %}
        {% for page in pages.children %}
            {% if page.visible %}
                {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
                    <li class="{{ current_page }}">
                        <a href="{{ page.url }}">
                            {{ page.menu }}
                        </a>
                    </li>
                {% endif %}
            {% endfor %}
        {% endif %}
        {% for mitem in site.menu %}
            <li>
                <a href="{{ mitem.link }}">
                    {{ mitem.text }}
                </a>
                {% if mitem.submenu %}
                    <ul>
                        {% for sub1 in mitem.submenu %}
                            <li>{% if loop.first %}<img src="{{ theme_url }}/img/arrowup.png" alt="">{% endif %}
                                <a href="{{ sub1.link }}">
                                    {{ sub1.text }}
                                </a>
                                {% if sub1.submenu %}
                                    <ul>
                                        {% for sub2 in sub1.submenu %}
                                            <li>
                                                <a href="{{ sub2.link }}">
                                                    {{ sub2.text }}
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>