Search code examples
content-management-systemgrav

Sub-navigation in Grav CMS

I want to make a subnav for my Grav Theme. I already saw a question on this topic: GRAV subnavigation

{% block navigation %}
{% macro loop(page) %}
    {% for p in page.children %}
        {% if p.visible %}
        {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
            <div>
                <a href="{{ p.url }}" class="btn btn-nav" role="button">
                    {{ p.menu }}
                </a>
                {% if p.children.count > 0 %}
                <div class="dropdown">
                    <a href="{{ p.url }}" class="btn btn-nav dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        {{ p.menu }}
                        <span class="icon icon--bottom"></span>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenulink" x-placement="bottom-start">
                        {{ _self.loop(p) }}
                    </div>
                </div>
                {% endif %}
            </div>
        {% endif %}
    {% endfor %}
{% endmacro %}
{% endblock %} 

<div class="topics" style="display: flex;">
{{ _self.loop(pages) }}
</div>

The problem I ran into is that with my code the pages get listed two times in the navigation and that's because of the a-tag in the dropdown div.

navigation picture

Is there a way that I can have the a-tag in the dropdown with all the information I wrote in my code? And that it only appears once in the navigation.

Thanks for your answers!

Solution 
  • {% block navigation %}
    {% macro loop(page) %}
        {% for p in page.children %}
            {% if p.visible %}
            {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
                <div>
                    {% if p.children.count > 0 %}
                    <div class="dropdown">
                        <a href="{{ p.url }}" class="btn btn-nav dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            {{ p.menu }}
                            <span class="icon icon--bottom"></span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenulink" x-placement="bottom-start">
                            {{ _self.loop(p) }}
                        </div>
                    </div>
                    {% else %}
                        <a href="{{ p.url }}" class="btn btn-nav" role="button">
                            {{ p.menu }}
                        </a>
                    {% endif %}
                </div>
            {% endif %}
        {% endfor %}
    {% endmacro %}
{% endblock %}

<div class="topics" style="display: flex;">
    {{ _self.loop(pages) }}
</div>

    This is the code I used instead of what I wrote in my question