Say I have a menu whose structure looks as follows:
menu:
- home
- about us
- api documentation
children:
- getting started
- advanced guide
When looping through my menu items, I want to identify if an element is top level or not – in this case: ["home", "about us", "api documentation"].
Here's what that would look like in _includes/menus.html:
{% if menu %}
<ul>
{% for item in menu %}
<li class="menu-item-{{ loop.index }}">
{% if item.is_root_level %}
{{ DO SOMETHING SPECIAL HERE }}
{% endif %}
<a href="{{ item.url }}" title="Go to {{ item.title }}"> {{ item.title }} </a>
{% if item.children %}
{% assign menu = item.children %}
{% include menu.html %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
I imagine I can traverse the item.parent attribute, but am not sure what the best way to go about this would be. Would appreciate any support you can provide.
Say I have a menu whose structure looks as follows:
When looping through my menu items, I want to identify if an element is top level or not – in this case:
["home", "about us", "api documentation"]
.Here's what that would look like in
_includes/menus.html
:I imagine I can traverse the
item.parent
attribute, but am not sure what the best way to go about this would be. Would appreciate any support you can provide.