Nested category navigation

Question

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

<h3><a href="categoryurl">Top Category One</a></h3>
<ul>
  <li><a href="categoryurl">Sub Category One A</a></li>
  <li><a href="categoryurl">Sub Category One B</a></li>
  <li><a href="categoryurl">Sub Category One C</a></li>
</ul>
<h3><a href="categoryurl">Top Category Two</a></h3>
<ul>
  <li><a href="categoryurl">Sub Category Two A</a></li>
  <li><a href="categoryurl">Sub Category Two B</a></li>
  <li><a href="categoryurl">Sub Category Two C</a></li>
</ul>

If have the following code which is nearly working:

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

I am just missing the wrapping <ul> 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!

Answer 1

You'll need to use the {% nav %} tag to output nested <ul>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 %}
    <h3 class="h5"><a href="{{ category.url }}">{{ category.title }}</a></h3>
  {% else %}
  <li><a href="{{ category.url }}">{{ category.title }}</a></li>
  {% endif %}
  {% ifchildren %}
    <ul class="unstyled">
      {% children %}
    </ul>
  {% endifchildren %}
{% endnav %}

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

Answer 2

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 %}
                <h3 class="h5"><a href="{{ category.url }}">{{ category.title }}</a></h3>
              {% else %}
              <li><a href="{{ category.url }}">{{ category.title }}</a></li>
              {% endif %}
              {% ifchildren %}
                <ul class="unstyled">
                  {% children %}
                </ul>
              {% endifchildren %}
            {% endnav %}