New: Learn Statamic on Laracasts!

We've retired the forum in favor of GitHub Discussions.

New conversations can be started on GitHub. Existing conversations will remain for a while longer.

Head over to GitHub →

Can't figure out secondary navigation with V3.

sjclark January 10, 2021 by sjclark

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 Andrew Jelley!
>>>>>>> Answered <<<<<<<
2 Replies
2 Followers