<p>After a long search and lots of trial and error, I've found the perfect solution!
This is how I created a dynamic structure navigation : parent/child (2 levels deep) with <code>class="active"</code> on the parent and the child <code>&lt;li&gt;</code>.</p>

<pre><code>&lt;ul class="Navigation"&gt;

{# Get top-level entries in structure section 'features' #}
{% set parentFeatures = craft.entries.section('features').level(1) %}

{# Loop through top-level entries #}
{% for parentFeature in parentFeatures %}

    {# Check if entry has descendants/children #}
    {% if not parentFeature.hasDescendants %}

        {# List navigation item if entry has NO child entries #}
        &lt;li class="Navigation-item {% if craft.app.request.absoluteUrl == parentFeature.url %}active{% endif %}"&gt;
            &lt;a href="{{ parentFeature.getUrl }}" class="Navigation-link"&gt;{{ parentFeature.title }}&lt;/a&gt;
        &lt;/li&gt;

    {% else %}

        {# List navigation item if entry does have child entries #}
        {# Show an active class if it is active or if it contains a child that is active #}
        &lt;li class="Navigation-item Navigation-item--dropdown {% if parentFeature.slug == craft.request.getSegment(parentFeature.level) %}active{% endif %}"&gt;

            &lt;a href="{{ parentFeature.getUrl }}" class="Navigation-link"&gt;{{ parentFeature.title }}&lt;/a&gt;
            &lt;ul class="Navigation Navigation--subMenu"&gt;

                {# Get child entries of current iteration's top-level entry #}
                {% set subPages = parentFeature.getChildren() %}

                {# Loop through those 2nd-level entries #}
                {% for subPage in subPages %}

                    {# This is the place where you'd nest the next menu hierarchy !! #}

                    {# List sub-menu navigation item #}
                    &lt;li class="Navigation-item Navigation-item--subMenu {% if craft.app.request.absoluteUrl == subPage.url %}active{% endif %}"&gt;
                        &lt;a href="{{ subPage.getUrl }}" class="Navigation-link Navigation-link--subMenu"&gt;{{ subPage.title }}&lt;/a&gt;
                    &lt;/li&gt;

                {% endfor %}

            &lt;/ul&gt;
        &lt;/li&gt;
    {% endif %}
{% endfor %}

&lt;/ul&gt;
</code></pre>

<hr>

<p>Thanks to <strong>Carlcs</strong>'s old answer about this found here: <a href="https://craftcms.stackexchange.com/a/1847/6586">https://craftcms.stackexchange.com/a/1847/6586</a></p>

CC BY-SA 4.0
2018-12-17T23:24:04.960Z
This is interesting. Is this code designed to hide the subnav unless the parent item has child pages? Example: if a parent page with no children is active, will the child pages of another show even though that page is not active?
Adam
CC BY-SA 4.0
2018-12-18T15:20:06.983Z
@Adam, It is exactly that. I wanted to be able to control everything with CSS. Now I have a way to show the parent/children of whatever page is active. Remember this is a side navigation so I wanted to be able to let the user expand and collapse navigation, similar to the craftcms.com/features/all
And yes, the first if statement checks to see if it has children, and if it does not, it doesn't put class .Navigation-item--dropdown on the parent <li> and doesn't put a <ul> submenu in it.
mateostabio
CC BY-SA 4.0
2024-02-29T16:29:05.617Z
Very nice. I need something similar with Craft 4, and your example really helped. Thank you!
Dario Zadro
CC BY-SA 4.0
2018-12-17T21:43:08.527Z
2018-12-17T21:43:08.527Z
mateostabio
<p>There is a plugin that might be doing what you are looking for. You start with building your navigation and put that into a variable. Then you run this through a TwigExtension provided by the plugin "k4navigationCraft3":</p>

<pre><code>{% set mainnavigation %}
    {% cache globally using key "main-navigation" %}
    {% set entries = craft.entries.section('features').all() %}

    &lt;ul&gt;
        {% nav entry in entries %}
            &lt;li&gt;
                &lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;
                {% ifchildren %}
                    &lt;ul&gt;
                        {% children %}
                    &lt;/ul&gt;
                {% endifchildren %}
            &lt;/li&gt;
        {% endnav %}
    &lt;/ul&gt;

    {% endcache %}
{% endset %}
</code></pre>

<p>Then you can use one of the plugins TwigExtensions to do:</p>

<pre><code>{{ mainnavigation | k4NavigationGetActivePath(url(craft.app.request.pathInfo)) | raw }}
</code></pre>

<p>The plugin is named "k4navigationCraft3" and can be found on <a href="https://bitbucket.org/kreisvierdigital/k4navigationcraft3/src/master/" rel="nofollow noreferrer">Bitbucket</a></p>

CC BY-SA 4.0
2018-12-17T16:58:41.257Z
Thanks for the answer, but I'm looking for a way to do this without a plugin and without using {% children %} if possible.
mateostabio
CC BY-SA 4.0
2018-12-14T15:41:00.790Z
2018-12-14T15:41:00.790Z
MisterMike
<p>A bit of a background on the project. I have a features structure section, that has 2 levels: Parent features &amp; Child features.</p>

<p><code>{% set features = craft.entries.section('features').all() %}</code></p>

<p>My goal is to get an active class on the parent if the parent page is active or if it's got a child that is active and also get an active class on the child if its active.</p>

<p>The <code>{% children %}</code> tag doesn't allow for custom HTML.</p>

<p>I am looking to get something similar to this left navigation. But instead of anchors, each feature will be its own page.
<a href="https://craftcms.com/features/all#section-types" rel="nofollow noreferrer">https://craftcms.com/features/all#section-types</a></p>

<p>Thanks</p>

<structure><navigation><children><parents>
How do I create a structure side navigation that will show active parent list-item and active child list-item
# How do I create a structure side navigation that will show active parent list-item and active child list-item

(Asked by: username_0 on 2018-12-13)

A bit of a background on the project. I have a features structure section, that has 2 levels: Parent features & Child features.

`{% set features = craft.entries.section('features').all() %}`

My goal is to get an active class on the parent if the parent page is active or if it's got a child that is active and also get an active class on the child if its active.

The `{% children %}` tag doesn't allow for custom HTML.

I am looking to get something similar to this left navigation. But instead of anchors, each feature will be its own page.
<https://craftcms.com/features/all#section-types>

Thanks

**Tags:** structure, navigation, children, parents


---

## 2 answers

### Answer by username_0 on 2018-12-17. Score: 3 | Accepted answer

After a long search and lots of trial and error, I've found the perfect solution!
This is how I created a dynamic structure navigation : parent/child (2 levels deep) with class="active" on the parent and the child .


{# Get top-level entries in structure section 'features' #}
{% set parentFeatures = craft.entries.section('features').level(1) %}

{# Loop through top-level entries #}
{% for parentFeature in parentFeatures %}

    {# Check if entry has descendants/children #}
    {% if not parentFeature.hasDescendants %}

        {# List navigation item if entry has NO child entries #}
        
            {{ parentFeature.title }}
        

    {% else %}

        {# List navigation item if entry does have child entries #}
        {# Show an active class if it is active or if it contains a child that is active #}
        

            {{ parentFeature.title }}
            

                {# Get child entries of current iteration's top-level entry #}
                {% set subPages = parentFeature.getChildren() %}

                {# Loop through those 2nd-level entries #}
                {% for subPage in subPages %}

                    {# This is the place where you'd nest the next menu hierarchy !! #}

                    {# List sub-menu navigation item #}
                    
                        {{ subPage.title }}
                    

                {% endfor %}

            
        
    {% endif %}
{% endfor %}




Thanks to Carlcs's old answer about this found here: https://craftcms.stackexchange.com/a/1847/6586

> **Comments:**
> **username_1**: This is interesting. Is this code designed to hide the subnav unless the parent item has child pages? Example: if a parent page with no children is active, will the child pages of another show even though that page is not active?  
> **username_0**: @username_1, It is exactly that. I wanted to be able to control everything with CSS. Now I have a way to show the parent/children of whatever page is active. Remember this is a side navigation so I wanted to be able to let the user expand and collapse navigation, similar to the craftcms.com/features/all And yes, the first if statement checks to see if it has children, and if it does not, it doesn't put class .Navigation-item--dropdown on the parent <li> and doesn't put a <ul> submenu in it.  
> **username_2**: Very nice. I need something similar with Craft 4, and your example really helped. Thank you!  

---

### Answer by username_3 on 2018-12-14. Score: 0

There is a plugin that might be doing what you are looking for. You start with building your navigation and put that into a variable. Then you run this through a TwigExtension provided by the plugin "k4navigationCraft3":
{% set mainnavigation %}
    {% cache globally using key "main-navigation" %}
    {% set entries = craft.entries.section('features').all() %}

    
        {% nav entry in entries %}
            
                {{ entry.title }}
                {% ifchildren %}
                    
                        {% children %}
                    
                {% endifchildren %}
            
        {% endnav %}
    

    {% endcache %}
{% endset %}

Then you can use one of the plugins TwigExtensions to do:
{{ mainnavigation | k4NavigationGetActivePath(url(craft.app.request.pathInfo)) | raw }}

The plugin is named "k4navigationCraft3" and can be found on Bitbucket

> **Comments:**
> **username_0**: Thanks for the answer, but I'm looking for a way to do this without a plugin and without using {% children %} if possible.  

---

