Can't figure out secondary navigation with V3.

I've spent 3+ hours over two days trying to get my site subnav to work. I've tried get_content, I've tried conditional code with segment_1 == slug, children != null and every sort of nav pattern inbetween. In v2, this was like a 2 minute task with nav:exists and/or nav:count, and a pattern I've used on many sites. Feel like with v3 I'm just missing something really fundamental here.

In short: I have a site design that has a primary Navigation at the top (which is working great). Then it has a Secondary Navigation bar which should display all the children if it's a top level page, and all the siblings if it's a secondary level page - should make sense with the screenshot linked hopefully. When there are no children it should display no children.

Heres the simplest version of the code I currently have - haven't included all the other things I've tried.

<nav class="flex mx-auto fluid-container nav-secondary bg-primary">
    {{ get_content from="/{segment_1}" }}<a
        class="relative inline-flex p-3 pr-8 text-2xl font-light leading-tight nav-arrow"
        href="{{url}}">{{title}}</a>{{ /get_content }}
    <ul class="flex flex-wrap">
        {{ nav from="/{segment_1}" max_depth="1"}}
        <li><a class="{{ if is_current || is_parent }} active {{ /if }}" href="{{ url }}">{{title}}</a></li>
        {{ /nav }}
    </ul>
</nav>

Currently the main issue with this is that it still outputs the primary pages as secondary navigation when there aren't secondary pages.

In general the thing that seems to keep tripping me up is that so many things to do with navigation including nav, is_parent, children don't really seem to throw any errors:

{{ nav from="BROKEN/ANYTEXT$%$#" max_depth="1"}}
{{ children }}
<li><a class="{{ if is_current || is_parent }} active {{ /if }}" href="{{ url }}">{{title}}</a></li>
    {{ /children }}
{{ /nav }}

Will always output everything:

Anywho, any help would be great!

EDIT; I've managed to get it working with this, but feels very hacky - would still really appreciate any advice?

<nav class="flex mx-auto fluid-container nav-secondary bg-primary">
    {{ get_content from="/{segment_1}" }}<a
        class="relative inline-flex p-3 pr-8 text-2xl font-light leading-tight nav-arrow"
        href="{{url}}">{{title}}</a>{{ /get_content }}
    <ul class="flex flex-wrap">
        {{ if segment_1 == slug }}
        {{ nav from="{ slug }"}}
        {{ if segment_1 != slug  }}
        <li><a class="{{ if is_current || is_parent }} active {{ /if }}" href="{{ url }}">{{title}}</a></li>
        {{ /if }}
        {{ /nav }}
        {{ elseif segment_2 == slug }}
        {{ nav from="{ parent.url }" max_depth="1"}}
        <li><a class="{{ if is_current || is_parent }} active {{ /if }}" href="{{ url }}">{{title}}</a></li>
        {{ /nav }}
        {{ /if }}
    </ul>
</nav>
Answered by j3ll3yfi5h!
>>>>>>> Answered <<<<<<<
2 Replies
2 Followers