Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-17T23:24:04.960Z
Answers.Text: 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?
Answers.UserDisplayName: Adam
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-18T15:20:06.983Z
Answers.Text: @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.
Answers.UserDisplayName: mateostabio
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-02-29T16:29:05.617Z
Answers.Text: Very nice. I need something similar with Craft 4, and your example really helped. Thank you!
Answers.UserDisplayName: Dario Zadro
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-17T21:43:08.527Z
Answers.LastActivityDate: 2018-12-17T21:43:08.527Z
Answers.UserDisplayName: mateostabio
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-17T16:58:41.257Z
Answers.Text: Thanks for the answer, but I'm looking for a way to do this without a plugin and without using {% children %} if possible.
Answers.UserDisplayName: mateostabio
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-14T15:41:00.790Z
Answers.LastActivityDate: 2018-12-14T15:41:00.790Z
Answers.UserDisplayName: MisterMike
Body: <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>
  
Tags: <structure><navigation><children><parents>
Title: How do I create a structure side navigation that will show active parent list-item and active child list-item
ThreadText: # 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 `<li>`.
  
  ```
  <ul class="Navigation">
  
  {# 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 #}
          <li class="Navigation-item {% if craft.app.request.absoluteUrl == parentFeature.url %}active{% endif %}">
              <a href="{{ parentFeature.getUrl }}" class="Navigation-link">{{ parentFeature.title }}</a>
          </li>
  
      {% 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 #}
          <li class="Navigation-item Navigation-item--dropdown {% if parentFeature.slug == craft.request.getSegment(parentFeature.level) %}active{% endif %}">
  
              <a href="{{ parentFeature.getUrl }}" class="Navigation-link">{{ parentFeature.title }}</a>
              <ul class="Navigation Navigation--subMenu">
  
                  {# 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 #}
                      <li class="Navigation-item Navigation-item--subMenu {% if craft.app.request.absoluteUrl == subPage.url %}active{% endif %}">
                          <a href="{{ subPage.getUrl }}" class="Navigation-link Navigation-link--subMenu">{{ subPage.title }}</a>
                      </li>
  
                  {% endfor %}
  
              </ul>
          </li>
      {% endif %}
  {% endfor %}
  
  </ul>
  
  ```
  
  ---
  
  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() %}
  
      <ul>
          {% nav entry in entries %}
              <li>
                  <a href="{{ entry.url }}">{{ entry.title }}</a>
                  {% ifchildren %}
                      <ul>
                          {% children %}
                      </ul>
                  {% endifchildren %}
              </li>
          {% endnav %}
      </ul>
  
      {% 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](https://bitbucket.org/kreisvierdigital/k4navigationcraft3/src/master/)
  
  > **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.  
  
  ---
  
  