Allow identification of top-level menu item (in the case of nested children)

[ybressler]

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.

[ybressler]

Note, this issue is downstream from this bug