<p>This is how I have solved it, with help from Ben above:</p>

<pre><code>{% set categories = craft.categories.group('projectType').all() %}
            {% nav category in categories %}
              {% if category.level == 1 %}
                &lt;h3 class="h5"&gt;&lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;&lt;/h3&gt;
              {% else %}
              &lt;li&gt;&lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;&lt;/li&gt;
              {% endif %}
              {% ifchildren %}
                &lt;ul class="unstyled"&gt;
                  {% children %}
                &lt;/ul&gt;
              {% endifchildren %}
            {% endnav %}
</code></pre>

CC BY-SA 4.0
2018-10-13T21:24:14.720Z
2018-10-13T21:24:14.720Z
Mike Harrison
<p>You'll need to use the <code>{% nav %}</code> tag to output nested <code>&lt;ul&gt;</code>s as documented here:
<a href="https://craftcms.com/guides/displaying-a-navigation-for-a-structure-section" rel="nofollow noreferrer">https://craftcms.com/guides/displaying-a-navigation-for-a-structure-section</a></p>

<pre><code>{% set categories = craft.categories.group('projectType').all() %}
{% nav category in categories %}
  {% if category.level == 1 %}
    &lt;h3 class="h5"&gt;&lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;&lt;/h3&gt;
  {% else %}
  &lt;li&gt;&lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;&lt;/li&gt;
  {% endif %}
  {% ifchildren %}
    &lt;ul class="unstyled"&gt;
      {% children %}
    &lt;/ul&gt;
  {% endifchildren %}
{% endnav %}
</code></pre>

<p>This answer should help too:
<a href="https://craftcms.stackexchange.com/a/4453">https://craftcms.stackexchange.com/a/4453</a></p>

CC BY-SA 4.0
2018-10-13T21:23:05.877Z
Thanks Ben that was a great pointer - I have solved it, posted the solution below as the answer. New to Craft so just working out the best approach for these common patterns. Cheers!
Mike Harrison
CC BY-SA 4.0
2018-10-14T07:35:38.990Z
Great, I have added your code to the answer to help people who land here in future and so you can mark it as resolved.
Ben Croker
CC BY-SA 4.0
2018-10-12T22:20:54.910Z
2018-10-14T07:34:17.037Z
2018-10-14T07:34:17.037Z
Ben Croker
<p>I am trying to achieve the following markup for my categories navigation:</p>

<pre><code>&lt;h3&gt;&lt;a href="categoryurl"&gt;Top Category One&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href="categoryurl"&gt;Sub Category One A&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="categoryurl"&gt;Sub Category One B&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="categoryurl"&gt;Sub Category One C&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a href="categoryurl"&gt;Top Category Two&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href="categoryurl"&gt;Sub Category Two A&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="categoryurl"&gt;Sub Category Two B&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="categoryurl"&gt;Sub Category Two C&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>If have the following code which is <em>nearly</em> working:</p>

<pre><code>{% set categories = craft.categories.group('projectType').all() %}
{% for category in categories %}
  {% if category.level == 1 %}
    &lt;h3 class="h5"&gt;&lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;&lt;/h3&gt;
  {% endif %}
  {% if category.level == 2 %}
    &lt;li&gt;&lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;&lt;/li&gt;
  {% endif %}
{% endfor %}
</code></pre>

<p>I am just missing the wrapping <code>&lt;ul&gt;</code> tags around the subcategory list items. Is there a way I can achieve this? The category group is limited to 2 levels so I can use the <code>category.level</code> if statements without a problem.</p>

<p>Thanks for any pointers!</p>

<templating><craft3><categories>
Nested category navigation
# Nested category navigation

(Asked by: username_0 on 2018-10-12)

I am trying to achieve the following markup for my categories navigation:
Top Category One

  Sub Category One A
  Sub Category One B
  Sub Category One C

Top Category Two

  Sub Category Two A
  Sub Category Two B
  Sub Category Two C


If have the following code which is nearly working:
{% set categories = craft.categories.group('projectType').all() %}
{% for category in categories %}
  {% if category.level == 1 %}
    {{ category.title }}
  {% endif %}
  {% if category.level == 2 %}
    {{ category.title }}
  {% endif %}
{% endfor %}

I am just missing the wrapping  tags around the subcategory list items. Is there a way I can achieve this? The category group is limited to 2 levels so I can use the category.level if statements without a problem.
Thanks for any pointers!

**Tags:** templating, craft3, categories

---

## 2 answers

### Answer by username_1 on 2018-10-12. Score: 4 | Accepted answer

You'll need to use the {% nav %} tag to output nested s as documented here:
https://craftcms.com/guides/displaying-a-navigation-for-a-structure-section
{% set categories = craft.categories.group('projectType').all() %}
{% nav category in categories %}
  {% if category.level == 1 %}
    {{ category.title }}
  {% else %}
  {{ category.title }}
  {% endif %}
  {% ifchildren %}
    
      {% children %}
    
  {% endifchildren %}
{% endnav %}

This answer should help too:
https://craftcms.stackexchange.com/a/4453

> **Comments:**
> **username_0**: Thanks Ben that was a great pointer - I have solved it, posted the solution below as the answer. New to Craft so just working out the best approach for these common patterns. Cheers!  
> **username_1**: Great, I have added your code to the answer to help people who land here in future and so you can mark it as resolved.  

---

### Answer by username_0 on 2018-10-13. Score: 1

This is how I have solved it, with help from Ben above:
{% set categories = craft.categories.group('projectType').all() %}
            {% nav category in categories %}
              {% if category.level == 1 %}
                {{ category.title }}
              {% else %}
              {{ category.title }}
              {% endif %}
              {% ifchildren %}
                
                  {% children %}
                
              {% endifchildren %}
            {% endnav %}


---

