Get the Sub-Category Link from Category field in a Structure (output with Nav tag)

Question

I am creating a Structure for the main navigation that has two possible choices for the Link: Entries field or a Categories field. The answer I received here showed me how to setup the basics but if the Category page I want to link to is a Sub Category, it will only link to the Parent.

{% set menu = craft.entries.section('navDropDownMenu').all() %}
<ul>
    {% nav link in menu %}
        <li>
        {% if link.entriesURL|length %}
            {% if craft.app.request.absoluteUrl ==  link.entriesFieldURL[0].url %}
                <a href="{{ link.entriesFieldURL[0].url }}" class="active">{{ link.title }}</a>
            {% else %}
                <a href="{{ link.entriesFieldURL[0].url }}">{{ link.title }}</a>
            {% endif %}
        {% else %}
            {% if craft.app.request.absoluteUrl ==  link.categoryFieldURL[0].url %}
                <a href="{{ link.categoryFieldURL[0].url }}" class="active">{{ link.title }}</a>
            {% else %}
                <a href="{{ link.categoryFieldURL[0].url }}">{{ link.title }}</a>
            {% endif %}
        {% endif %} 
            {% ifchildren %}
                <ul>
                    {% children %}
                </ul>
            {% endifchildren %}
        </li>
    {% endnav %}

So what I'm trying to figure out is, if I have a category setup like this:

-Shoes
    -Tennis
    

in the context of using the Nav Tag (as above), how do I get the link to 'Tennis' and not 'Shoes'?

I know you can output a nav of Categories, but I wanted to use a Structure if possible because the navigation has a mixture of categories and links to internal pages, and they are mixed together in the navigation as far as sorting goes.

Answer 1

In short, don't use the {% nav %} tag as it's not flexible enough for what you need.

Assuming your fields are called entriesFieldURL and categoriesFieldURL, try something like this:

{# Fetch the current page ID to use for your active class later on. If entry exists, we are on an entry page, else, category page or NULL fallback #}
{% set currentPageId = entry.id ?? category.id ?? null %}

{# Fetch your entries and eager-load children #}
{% set menu = craft.entries()
    .section('navDropDownMenu')
    .level(1)
    .with('children')
    .all() %}

<ul>
{%- for item in menu -%}
    
    {# Set a link object which switches based on whether you have a category or an entry #}
    {%- set link = item.entriesFieldURL|length ? item.entriesFieldURL[0] : item.categoriesFieldURL.leaves()[0] -%}
    <li>
        
        {# Output the link and add active class base on the current page when needed #}
        <a href="{{ link.url }}" class="{{ link.id == currentPageId ? 'active' }}">{{ link.title }}</a>
        
        {# Does this item have children? #}
        {%- if item.children -%}
        <ul>
            {%- for item in item.children -%}
            
            {# As above, set a link object which switches based on whether you have a category or an entry #}
            {%- set link = item.entriesFieldURL|length ? item.entriesFieldURL[0] : item.categoriesFieldURL.leaves()[0] -%}
            <li>
                
                {# And again, output the link and add active class when needed #}
                <a href="{{ link.url }}" class="{{ link.id == currentPageId ? 'active' }}">{{ link.title }}</a>
            </li>
            {%- endfor -%}
        </ul>
        {%- endif -%}
    </li>
{%- endfor -%}
</ul>

As you can see, there's some repetition in there which you could solve by using a short macro to build the <a> tags making the complete thing:

{# Fetch the current page ID to use for your active class later on. If entry exists, we are on an entry page, else, category page or NULL fallback #}
{% set currentPageId = entry.id ?? category.id ?? null %}

{# Fetch your entries and eager-load children #}
{% set menu = craft.entries()
    .section('navDropDownMenu')
    .level(1)
    .with('children')
    .all() %}

{% macro linkItem(item, currentPageId) %}
    {%- set link = item.entriesFieldURL|length ? item.entriesFieldURL[0] : item.categoriesFieldURL.leaves()[0] -%}
    <a href="{{ link.url }}" class="{{ link.id == currentPageId ? 'active' }}">{{ link.title }}</a>
{% endmacro %}

<ul>
{%- for item in menu -%}
    <li>
        {{ _self.linkItem(item, currentPageId) }}
        {%- if item.children -%}
        <ul>
            {%- for item in item.children -%}
                <li>
                    {{ _self.linkItem(item, currentPageId) }}
                </li>
            {%- endfor -%}
        </ul>
        {%- endif -%}
    </li>
{%- endfor -%}
</ul>

You could further refine but hopefully, this gets you started :)