Custom or complex nav tag

Question

Is it possible to build something like this with a structure and the {% nav %} tag?

     <ul class="nav navbar-nav">
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu">
           <li>
               <div class="yamm-content">
                  <div class="row"> 
                    ...
           </li>
         </ul>
       </li>
     </ul>

This is my code for now:

{% set entries = craft.entries.section('pagina') %}
   <ul class="nav navbar-nav">
      {% nav entry in entries %}
         <li {{ activeClass(entry.slug) }} {% if entry.hasDescendants() %}class="dropdown yamm-fw"{% endif %}>     
            <a href="#" {% if entry.hasDescendants() %}dropdown-toggle{% endif %}" {% if entry.hasDescendants() %}data-toggle="dropdown"{% endif %}>{{ entry.title }}</a>

            {% ifchildren %}
               <ul class="dropdown-menu">
                  {% children %}
               </ul>
            {% endifchildren %}
         </li>
      {% endnav %}
   </ul>

The problem is, i need custom html inside the children

Answer 1

You'll want to make use of the level property of your entry...

{% if entry.level == 1 %}
    <!-- Top Level Links -->
{% else %}
    <!-- Child Links -->
{% endif %}

Answer 2

For more control over nav output I like to use a recursive macro:

{% macro recursive_nav(entries, depth) %}
{% import _self as self %}
  <ul>
    {% for entry in entries %}
      <li>
        {{ entry }}
        {% if entry.hasDescendents() %}
          {{ self.recursive_nav(entry.children, depth+1) }}
        {% endif %}
      </li>
  </ul>
{% endmacro %}

{% set entries = craft.entries.section('pagina') %}
{{ recursive_nav(entries, 1) }}

You can test depth in the macro, and customize your output accordingly.

Answer 3

Input:

<ul>
{% nav category in craft.categories.group('mainMenu').level(1) %}

{% if category.hasDescendants() %}
<li>1 Level | {{ category.title }}<ul>
  {% set subCategories = craft.categories.descendantOf(category).level(2) %}

  {% for category in subCategories %}
    {% if category.hasDescendants() %}
    <li>2 Level | {{ category.title }}<ul>
      {% set subCategories = craft.categories.descendantOf(category).level(3) %}

      {% for category in subCategories %}
      <li>3 Level | {{ category.title }}</li>
      {% if loop.last %}</ul></li>{% endif %}
      {% endfor %}

    {% else %}
    <li>2 Level | {{ category.title }}</li>

    {% endif %}
  {% if loop.last %}</ul></li>{% endif %}
  {% endfor %}

{% else %}
<li>1 Level | {{ category.title }}</li>
{% endif %}

{% endnav %}
</ul>

Output:

Answer 4

Here's an example for Craft 3, using macros. All in the same partial.

• First we set a macro for each distinctive level
• Then a macro that could be repeated infinitely
• Load structure with children
• Start rendering at the first macro

That gives us:

    {# Level 1 template #}
    {% macro level1(pages) %}
        <ul class="ul-level1">
          {% for page in pages %}
            <li class="parent">
            <a class="so_good_to_have_classes_everywhere_level1" {% endif %} href="{{ page.uri }}">{{ page.title }}</a>
              {% if page.children is not empty %}
                {# twig: _self see https://twig.symfony.com/doc/2.x/tags/macro.html : "import _self as self" not necessary anymore#}
                {{ _self.level2(page.children) }}
              {% endif %}
            </li>
          {% endfor %}
        </ul>
    {% endmacro %}

    {#  Level 2 template  #}
    {% macro level2(pages) %}
      <ul class="ul-level2>
        {% for page in pages %}
          <li>
            <a class="so_good_to_have_classes_everywhere_level2" href="{{ page.uri }}">{{ page.title }}</a>
            {% if page.children is not empty %}
              {{ _self.recursive_children(page.children) }}
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    {% endmacro %}

    {#  Levels further down template  #}
    {% macro recursive_children(pages) %}
      <ul class="accordion-pane" style="display: none;">
        {% for page in pages %}
          <li>
            <a href="{{ page.uri }}">{{ page.title }}</a>
            {% if page.children is not empty %}
              {{ _self.recursive_children(page.children) }}
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    {% endmacro %}

    {# Eager load 4 levels of children #}
    {% set pages = craft.entries.section('pages').with('children.children.children').level(1).all() %}

    {# Display the full menu, going through the macros #}
    <nav>
      {{ _self.level1(pages) }}
    </nav>

Thanks to Oli from Craft for the help!