<ul>
  {% for item in items %}
    <li>
      {% if item.url %}
        <a href="{{ item.url }}"
           class="{% if item.active %}active text-success text-indigo-500 hover:text-indigo-300{% else %}hover:text-gray-400{% endif %}"
           {% if item.active %}aria-current="page"{% endif %}>{{ item.title }}</a>
      {% else %}
        <span {% if item.active %}class="text-indigo-500 text-success active" aria-current="page"{% endif %}>{{ item.title }}</span>
      {% endif %}
      {% if item.items %}
        <ul>
          {% for subitem in item.items %}
            <li>
              <a href="{{ subitem.url }}"
                 class="{% if subitem.active %}active text-success text-indigo-500 hover:text-indigo-300{% else %}hover:text-gray-400{% endif %}"
                 {% if subitem.active %}aria-current="page"{% endif %}>{{ subitem.title }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>
