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

enter image description here

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 %}
      <li class="dropdown {# that's where the class should end up #}">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
           {{ block.seite }} <span class="caret"></span>
         <ul class="dropdown-menu">
   {% endif %}
   <li {# here adding an active class is easy #}>
    <a href="{{ dropNavi.url }}">{{ dropNavi.title }}</a>
  {% if loop.last %}</ul>{% 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 <li class="dropdown {% if craft.request.getLastSegement == dropNavi.url %}"> 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.

<a href="{{ page.getUrl }}" {{craft.request.getSegment(2)|lower==page.slug|lower ? 'class=is-active'|e : ''}}>
    {{ 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.

  • Unfortunately slug and pagetitle are not the same
    – KSPR
    Nov 10 '16 at 9:48

Heck! I just did it with jQuery:

$('.nav .dropdown-menu li.active').parents('li').addClass('activeParent');​

and that's that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.