Navigation drop-down problem

Question

Doing my first site with Craft and UiKit framework I encountered a small problem with dropdown menu. Here is my code:

<ul>
  {% set entries = craft.entries.section('spb') %}
  {% nav entry in entries %}
  <li class="uk-parent" data-uk-dropdown>
    <a {% if craft.request.getPath() == entry.uri %} class="active" {% endif %} href="{{ entry.url }}">{{ entry.title }}</a>
    {% ifchildren %}
    <div class="uk-dropdown">
      <ul class="uk-nav uk-nav-dropdown">
        {% children %}
      </ul>
    </div>
    {% endifchildren %}
  </li>
  {% endnav %}
</ul>

The point is that my child element looks exactly like parent because it takes its structure. But I don't need neither "class" nor "data-uk-dropdown" element...

<li class="uk-parent" data-uk-dropdown=""><a href="#">...</a></li>

Is there any workaround? Thanks.

Answer 1

You can use entry.level in a conditional:

{% set entries = craft.entries.section('spb') %}
{% nav entry in entries %}

    {% set liTagAttributes = entry.level == 1 ? 'class="uk-parent" data-uk-dropdown' : 'class="uk-child"' %}

    <li {{ liTagAttributes|raw }}>
        <a href="{{ entry.url }}">{{ entry.title }}</a>
        {% ifchildren %}
            ...
        {% endifchildren %}
    </li>

{% endnav %}

I set a intermediate var to keep the template code clean. If you don't have many levels in your structure, you could also consider to not use the nav tag at all and nest your navigation levels using hasDescendents and getDescendents(1) (see the example code I posted here).