Show only children of current page in submenu

Question

I have checked the official documentation and also these pages:

How do you only show children of "active" parent in a Structure section's nav?

How to output a structure sub-navigation of current page

I still can't get this to work though. I have tried various code and currently have this (from official docs):

<ul id="sub-menu">

{% set pages = craft.entries.section('pages').level('>1') %}
{% nav entry in pages %}
<li>
    <a href="{{ entry.url }}">{{ entry.title }}</a>
        {% ifchildren %}
            <ul>
               {% children %}
            </ul>
         {% endifchildren %}
</li>
{% endnav %}

</ul>

This outputs all the children whenever I'm on any top level page. My structure is a little different though, like so (shortened for brevity):

Home
About (structure: 'pages', entry type: 'aboutPage')
  - Aims (structure: 'pages', entry type: 'aboutPage')
  - Governance (structure: 'pages', entry type: 'aboutPage')
Services (structure: 'pages', entry type: 'servicesPage')
  - Residential (structure: 'pages', entry type: 'servicesPage')
  - Homecare (structure: 'pages', entry type: 'servicesPage')
Resources (structure: 'pages', entry type: 'resourcePage')
  - Health (structure: 'pages', entry type: 'resourcePage')
  - External (structure: 'pages', entry type: 'resourcePage')

You can see I have a tree which uses a single 'pages' structure to keep everything obvious in the admin section. I then just create an entry, choose the parent and choose the entry type to add content.

I use a structure 'mainMenu' to add links manually to the main menu using a related entry field. So I have:

Home - About - Services - Resources

As top level pages. When I'm on a top level page, I want to show children of this current page and to hide the unordered list element when there are no children of the current page, and I'm stuck.

Can anyone point me in the right direction? Thanks in advance.

Answer 1

Ran into the same issues you had. Pulled this from a working site I recently built.

Basically you have to get the topmost page. I found entry.getAncestors().level(1).first() works for that no matter what level you're in.

From there, you just get everything that's underneath it. But first check to see if there's actually any children using {% if topLevel.hasDescendants %}

       <! -- local navigation -->

        {% set topLevel = (entry.level == 1) ? entry : entry.getAncestors().level(1).first()  %}

        {# don't show the tree if nothing's under it #}

        {% if topLevel.hasDescendants %}

            <h2>{{topLevel}}</h2>
            <ul>
            {% set subnav =  topLevel.getDescendants()  %}

            {% nav page in subnav  %}
            {% if page.id != entry.id %}<li>{{ page.getLink() }}</li>{%else%}<li class="current-page">{{page}}</li>{%endif%}

                {% ifchildren %}
                    <ul class="sub-nav">
                            {% children %}
                        </ul>
                {% endifchildren %}

            {% endnav %}

            </ul>

       {% endif %}

     <!-- // local navigation -->

Answer 2

quite similar solution with the one function, first function fails with following error : Calling unknown method: craft\elements\db\EntryQuery::first()

{% set rootEntry = entry.ancestors.level(1).one()    %}
        {% if entry.level ==1  %}{%  set rootEntry=entry  %} {% endif %}
        {% if rootEntry %}
            <h2> <b> <a href="{{ rootEntry.url }}"> {{ rootEntry.title }}</a></b></h2>
            {%  set pages = craft.entries().level('>=2').descendantOf(rootEntry.id).all() %}

            <ul>
                {% nav page in pages %}
                    {% set expanded = entry is defined and (page.isAncestorOf(entry) ) %}

                    <li >
                        {#     {{ page.getLink() }} {{ entry.id }}{{ page.id }}#}
                        <a href="{{ page.url }}" {% if expanded or page.id == entry.id %} class="font-bold"{% else %} class="font-light"{% endif %}>{{ page.title }}</a>
                        {% ifchildren %}
                            <ul>
                                {% children %}
                            </ul>
                        {% endifchildren %}
                    </li>
                {% endnav %}
            </ul>
        {% endif %}