Community guidelines
Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.
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!
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>
Log in to reply.
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 0 | 1282 | 9 years ago | ||
| 2 | 889 | 9 years ago | ||
| 2 | 4019 | 9 years ago | ||
| 1 | 2894 | 9 years ago | ||
| 3 | 1078 | 9 years ago |