How to add a class to menu items that are not expanded (or don't have children) in the navigation Twig template?

Question

How do you add a class to menu items that are not expanded (or don't have children)?

    {% for item in items %}
      {%
        set classes = [
          item.is_expanded ? 'menu-item--expanded dropdown panel simple-dropdown',
          item.is_collapsed ? 'collapsed',
          item.in_active_trail ? 'active',
        ]
      %}
      <li{{ item.attributes.addClass(classes) }}>
        {{ link(item.title, item.url) }}
        {% if item.below %}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% endif %}
      </li>
    {% endfor %}

Edit: Can anyone point me into getting the answer provided, implemented in my example?

Answer 1

I think you can do some cool things when you set classes. A colon : indicates 'else'.

{%
  set classes = [
    item.is_expanded ? 'is-expanded' : 'not-expanded',
    item.is_collapsed ? 'is-collapsed' : 'not-collapsed',
    item.in_active_trail ? 'active',
    item.below ? 'has-children': 'no-children',
  ]
%}

EDIT: Added ', after no-children

Answer 2

Since Twig builds out the menu recursively the only way (I've found) to do this is to first check if the current item has any active children, and add a class to it once that is determined. So, before the li is posted, check if it has any children. Something like:

{% for child in item.below %}
  {% set children = item.below ? '1': '0' %}

  {% if children %}
    {# the current item has expanded/active children #}
  {% else %}
    {# the current item has no children #}
    {% set classes = classes|merge(['no_active_children']) %}
  {% endif %}

  <li{{ item.attributes.addClass(classes) }}>{{ link(item.title, item.url) }}
    {% if item.below %}
        {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
    {% endif %}
  </li>
{% endfor %}

Hope that helps.