Say I have a menu whose structure looks as follows:
menu:
- home
- about us
- api documentation
children:
- getting started
- advanced guideWhen 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:{% 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.parentattribute, but am not sure what the best way to go about this would be. Would appreciate any support you can provide.