Answers.Body: <p>You'll want to make use of the <a href="http://buildwithcraft.com/docs/templating/entrymodel#level"><code>level</code></a> property of your entry...</p>
  
  <pre><code>{% if entry.level == 1 %}
      &lt;!-- Top Level Links --&gt;
  {% else %}
      &lt;!-- Child Links --&gt;
  {% endif %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-08T18:27:21.673Z
Answers.LastActivityDate: 2014-08-08T18:27:21.673Z
Answers.UserDisplayName: Lindsey D
Answers.Body: <p>For more control over nav output I like to use a recursive macro:</p>
  
  <pre><code>{% macro recursive_nav(entries, depth) %}
  {% import _self as self %}
    &lt;ul&gt;
      {% for entry in entries %}
        &lt;li&gt;
          {{ entry }}
          {% if entry.hasDescendents() %}
            {{ self.recursive_nav(entry.children, depth+1) }}
          {% endif %}
        &lt;/li&gt;
    &lt;/ul&gt;
  {% endmacro %}
  
  {% set entries = craft.entries.section('pagina') %}
  {{ recursive_nav(entries, 1) }}
  </code></pre>
  
  <p>You can test <code>depth</code> in the macro, and customize your output accordingly.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-08T18:26:39.323Z
Answers.LastActivityDate: 2014-08-08T18:26:39.323Z
Answers.UserDisplayName: Marion Newlevant
Answers.Body: <p>Input:
  <a href="https://i.sstatic.net/w56Oc.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/w56Oc.png" alt="creating categories in craft"></a></p>
  
  <pre><code>&lt;ul&gt;
  {% nav category in craft.categories.group('mainMenu').level(1) %}
  
  {% if category.hasDescendants() %}
  &lt;li&gt;1 Level | {{ category.title }}&lt;ul&gt;
    {% set subCategories = craft.categories.descendantOf(category).level(2) %}
  
    {% for category in subCategories %}
      {% if category.hasDescendants() %}
      &lt;li&gt;2 Level | {{ category.title }}&lt;ul&gt;
        {% set subCategories = craft.categories.descendantOf(category).level(3) %}
  
        {% for category in subCategories %}
        &lt;li&gt;3 Level | {{ category.title }}&lt;/li&gt;
        {% if loop.last %}&lt;/ul&gt;&lt;/li&gt;{% endif %}
        {% endfor %}
  
      {% else %}
      &lt;li&gt;2 Level | {{ category.title }}&lt;/li&gt;
  
      {% endif %}
    {% if loop.last %}&lt;/ul&gt;&lt;/li&gt;{% endif %}
    {% endfor %}
  
  {% else %}
  &lt;li&gt;1 Level | {{ category.title }}&lt;/li&gt;
  {% endif %}
  
  {% endnav %}
  &lt;/ul&gt;
  </code></pre>
  
  <p>Output:</p>
  
  <p><a href="https://i.sstatic.net/Q4NMt.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Q4NMt.png" alt="output"></a></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-01T09:14:34.990Z
Answers.LastActivityDate: 2017-02-01T09:14:34.990Z
Answers.UserDisplayName: Nikolay Bronskiy
Answers.Body: <p>Here's an example for Craft 3, using macros. All in the same partial.</p>
  
  <ul>
  <li>First we set a macro for each distinctive level</li>
  <li>Then a macro that could be repeated infinitely</li>
  <li>Load structure with children</li>
  <li>Start rendering at the first macro</li>
  </ul>
  
  <p>That gives us:</p>
  
  <pre><code>    {# Level 1 template #}
      {% macro level1(pages) %}
          &lt;ul class="ul-level1"&gt;
            {% for page in pages %}
              &lt;li class="parent"&gt;
              &lt;a class="so_good_to_have_classes_everywhere_level1" {% endif %} href="{{ page.uri }}"&gt;{{ page.title }}&lt;/a&gt;
                {% 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 %}
              &lt;/li&gt;
            {% endfor %}
          &lt;/ul&gt;
      {% endmacro %}
  
      {#  Level 2 template  #}
      {% macro level2(pages) %}
        &lt;ul class="ul-level2&gt;
          {% for page in pages %}
            &lt;li&gt;
              &lt;a class="so_good_to_have_classes_everywhere_level2" href="{{ page.uri }}"&gt;{{ page.title }}&lt;/a&gt;
              {% if page.children is not empty %}
                {{ _self.recursive_children(page.children) }}
              {% endif %}
            &lt;/li&gt;
          {% endfor %}
        &lt;/ul&gt;
      {% endmacro %}
  
      {#  Levels further down template  #}
      {% macro recursive_children(pages) %}
        &lt;ul class="accordion-pane" style="display: none;"&gt;
          {% for page in pages %}
            &lt;li&gt;
              &lt;a href="{{ page.uri }}"&gt;{{ page.title }}&lt;/a&gt;
              {% if page.children is not empty %}
                {{ _self.recursive_children(page.children) }}
              {% endif %}
            &lt;/li&gt;
          {% endfor %}
        &lt;/ul&gt;
      {% 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 #}
      &lt;nav&gt;
        {{ _self.level1(pages) }}
      &lt;/nav&gt;
  </code></pre>
  
  <p>Thanks to Oli from Craft for the help! </p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-04-07T20:26:40.877Z
Answers.LastActivityDate: 2020-04-07T20:33:28.687Z
Answers.LastEditDate: 2020-04-07T20:33:28.687Z
Answers.UserDisplayName: Urs
Body: <p>Is it possible to build something like this with a structure and the {% nav %} tag?</p>
  
  <pre><code>     &lt;ul class="nav navbar-nav"&gt;
         &lt;li class="dropdown"&gt;
           &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown&lt;/a&gt;
           &lt;ul class="dropdown-menu"&gt;
             &lt;li&gt;
                 &lt;div class="yamm-content"&gt;
                    &lt;div class="row"&gt; 
                      ...
             &lt;/li&gt;
           &lt;/ul&gt;
         &lt;/li&gt;
       &lt;/ul&gt;
  </code></pre>
  
  <p><strong>This is my code for now:</strong></p>
  
  <pre><code>{% set entries = craft.entries.section('pagina') %}
     &lt;ul class="nav navbar-nav"&gt;
        {% nav entry in entries %}
           &lt;li {{ activeClass(entry.slug) }} {% if entry.hasDescendants() %}class="dropdown yamm-fw"{% endif %}&gt;     
              &lt;a href="#" {% if entry.hasDescendants() %}dropdown-toggle{% endif %}" {% if entry.hasDescendants() %}data-toggle="dropdown"{% endif %}&gt;{{ entry.title }}&lt;/a&gt;
  
              {% ifchildren %}
                 &lt;ul class="dropdown-menu"&gt;
                    {% children %}
                 &lt;/ul&gt;
              {% endifchildren %}
           &lt;/li&gt;
        {% endnav %}
     &lt;/ul&gt;
  </code></pre>
  
  <p><strong>The problem is, i need custom html inside the children</strong></p>
  
Tags: <navigation>
Title: Custom or complex nav tag
ThreadText: # Custom or complex nav tag
  
  (Asked by: username_0 on 2014-08-08)
  
  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**
  
  **Tags:** navigation
  
  
  ---
  
  ## 4 answers
  
  ### Answer by username_1 on 2014-08-08. Score: 9
  
  You'll want to make use of the [`level`](http://buildwithcraft.com/docs/templating/entrymodel#level) property of your entry...
  
  ```
  {% if entry.level == 1 %}
      <!-- Top Level Links -->
  {% else %}
      <!-- Child Links -->
  {% endif %}
  
  ```
  
  
  ---
  
  ### Answer by username_2 on 2014-08-08. Score: 6
  
  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 by username_3 on 2017-02-01. Score: 3
  
  Input:
  [![creating categories in craft](https://i.sstatic.net/w56Oc.png)](https://i.sstatic.net/w56Oc.png)
  
  ```
  <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:
  
  [![output](https://i.sstatic.net/Q4NMt.png)](https://i.sstatic.net/Q4NMt.png)
  
  
  ---
  
  ### Answer by username_4 on 2020-04-07. Score: 2
  
  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!
  
  
  ---
  
  