[11ty Navigation] Adding specific classes on each child level in nested menu?

[dusan-b]

I've built a multi-level navigation using the 11ty Navigation plugin, and was wondering if it is possible to add specific classes on each nested level respectively to achieve something like the following:

<ul class="level-1">
  <li>
    <button>Dropdown</button>
    <ul class="level-2">
      <li>
        <!-- etc. -->
      </li>
    </ul>
  </li>
</ul>

I only could figure out how to add a class on all lists that contain one or more submenus, using Nunjucks Macro Code for Rendering Unlimited Child Levels:

{% set navPages = collections.all | eleventyNavigation %}
{% macro renderNavListItem(entry) -%}
<li class="list-item">
  <a href="{{ entry.url }}">{{ entry.title }}</a>
  {%- if entry.children.length -%}
    <ul class="list has-submenu">
      {%- for child in entry.children %}
        {{ renderNavListItem(child) }}
      {% endfor -%}
    </ul>
  {%- endif -%}
</li>
{%- endmacro %}
<ul class="list">
  {%- for entry in navPages %}
    {{ renderNavListItem(entry) }}
  {%- endfor -%}
</ul>

With this I have only one class, namely has-submenu, for every list element with nested submenus, regardless of its depth.

To address the list element inside my navigation that has a depth level of, let's say 3, I had to write something like this:

/* <ul> Level 3 */
.main-nav > .list > .list-item > .list > .list-item > .list {
  /* some styles... */
}

Is there a way to specify classes on each nested level respectively?

I tried to tweak the if statement in the macro, something like

{% if entry.children.length == 1 %} or {% if entry.children.length.1 %}

...but it doesn't work.