1

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!

3

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

  • 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 Oct 13 '18 at 21:23
  • 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 Oct 14 '18 at 7:35
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 %}
                <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 %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.