<p>Heck! I just did it with jQuery:</p>

<pre><code>$('.nav .dropdown-menu li.active').parents('li').addClass('activeParent');​
</code></pre>

<p>and that's that.</p>

CC BY-SA 3.0
2016-12-19T13:25:11.550Z
2016-12-19T13:25:11.550Z
KSPR
<pre><code>&lt;a href="{{ page.getUrl }}" {{craft.request.getSegment(2)|lower==page.slug|lower ? 'class=is-active'|e : ''}}&gt;
    {{ page.title}}
&lt;/a&gt;
</code></pre>

<p>You can use something like this, only you compare your <code>getSegment()</code> with the related Title field instead of <code>page.slug</code> if your page in your url has the pagetitle name.</p>

CC BY-SA 3.0
2016-11-10T09:48:14.063Z
Unfortunately slug and pagetitle are not the same
KSPR
CC BY-SA 3.0
2016-11-07T15:44:35.160Z
2016-11-07T19:05:52.290Z
2016-11-07T19:05:52.290Z
mike-orez
<p>I have a dynamic navigation consisting out of matrix and entries fields:</p>

<p><a href="https://i.sstatic.net/Tsatu.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Tsatu.png" alt="enter image description here"></a></p>

<p>This then gets printed on the frontend as a dropdown.</p>

<p>No is it somehow possible to add a active class to the dropdown toplevel button?</p>

<p>Basicaly passing the active state back up to the toplevel button.</p>

<pre><code>{% for dropNavi in block.dropdownNavi %}
   {% if loop.first %}
      &lt;li class="dropdown {# that's where the class should end up #}"&gt;
         &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
           {{ block.seite }} &lt;span class="caret"&gt;&lt;/span&gt;
         &lt;/a&gt;
         &lt;ul class="dropdown-menu"&gt;
   {% endif %}
   &lt;li {# here adding an active class is easy #}&gt;
    &lt;a href="{{ dropNavi.url }}"&gt;{{ dropNavi.title }}&lt;/a&gt;
   &lt;/li&gt;
  {% if loop.last %}&lt;/ul&gt;{% endif %}
{% endfor %}
</code></pre>

<p>The problem is that this is a matrix field so there could be 3 or 6 or 5 dropdowns. Therefore the <code>{{ loop.index }}</code> does not work as a identifier. I can't see a way. Is this even possible?</p>

<p>I tried things like <code>&lt;li class="dropdown {% if craft.request.getLastSegement == dropNavi.url %}"&gt;</code> and various versions of this.</p>

<p>But stuff like this aplies an active class to all the dropdowns present. Never on the one containing the current url.</p>

<matrix><navigation>
Pass active class into dropdown
# Pass active class into dropdown

(Asked by: username_0 on 2016-11-07)

I have a dynamic navigation consisting out of matrix and entries fields:

This then gets printed on the frontend as a dropdown.
No is it somehow possible to add a active class to the dropdown toplevel button?
Basicaly passing the active state back up to the toplevel button.
{% for dropNavi in block.dropdownNavi %}
   {% if loop.first %}
      
         
           {{ block.seite }} 
         
         
   {% endif %}
   
    {{ dropNavi.title }}
   
  {% if loop.last %}{% endif %}
{% endfor %}

The problem is that this is a matrix field so there could be 3 or 6 or 5 dropdowns. Therefore the {{ loop.index }} does not work as a identifier. I can't see a way. Is this even possible?
I tried things like  and various versions of this.
But stuff like this aplies an active class to all the dropdowns present. Never on the one containing the current url.

**Tags:** matrix, navigation


---

## 2 answers

### Answer by username_0 on 2016-12-19. Score: 1 | Accepted answer

Heck! I just did it with jQuery:
$('.nav .dropdown-menu li.active').parents('li').addClass('activeParent');​

and that's that.


---

### Answer by username_1 on 2016-11-07. Score: 1

{{ page.title}}


You can use something like this, only you compare your getSegment() with the related Title field instead of page.slug if your page in your url has the pagetitle name.

> **Comments:**
> **username_0**: Unfortunately slug and pagetitle are not the same  

---

