Answers.Body: <p>Yes, you can!</p>
  
  <p>The first thing you need to do is to add the entire cached content into a single variable:</p>
  
  <pre><code>{% set navigation %}
      {% cache globally for 3 years %}
          {# YOUR CACHED CONTENT #}
      {% endcache %}
  {% endset %}
  </code></pre>
  
  <p>Then you need to add some dummy placeholder tags on your <code>&lt;li&gt;</code> tag and your <code>&lt;a&gt;</code> tag which then can be used by <code>|replace</code> filter to make the replacement.</p>
  
  <p>For <code>&lt;li&gt;</code></p>
  
  <pre><code>&lt;li class="{{ entry.hasDescendants() ? 'has-dropdown' : "" }} data-class-{{entry.slug}}"&gt;
  </code></pre>
  
  <p>For <code>&lt;a&gt;</code> (You need to modify this for each different entry type)</p>
  
  <pre><code>&lt;a href="{{ entry.url}}" data-url="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;
  </code></pre>
  
  <p>After all this you'll have special "tags" in your cached content that you can run some replacement on, like this:</p>
  
  <pre><code>{{ navigation|replace({('data-url="' ~ craft.request.getUrl() ~ '"'): 'class="active"'})|replace({('data-class-' ~ craft.request.segment(1)): 'active'})|raw }}
  </code></pre>
  
  <p><em>You can run two <code>|replace</code> filters after each other, you could just split them up into two steps. Also, this code is untested - I just wrote it from my head so please be aware there might be some typos etc..</em></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-18T09:45:53.280Z
Answers.Text: Thanks - great job - only need the active class on the li so just need the 1 filter. Cheers!
Answers.UserDisplayName: mmc501
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-18T10:54:19.253Z
Answers.Text: If it solved your issue please approve the answer. Cherrio!
Answers.UserDisplayName: naboovalley
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2014-11-18T09:09:23.037Z
Answers.LastActivityDate: 2018-10-22T10:29:11.300Z
Answers.LastEditDate: 2018-10-22T10:29:11.300Z
Answers.UserDisplayName: naboovalley
Body: <p>I have a structure which controls my main site navigation.
  It's the same across the site so it is best to cache globally as opposed to a cache of the navigation or every url.</p>
  
  <p>The last answer on this pages says that you can use Twig's replace filter to achieve this:
  <a href="https://craftcms.stackexchange.com/questions/1473/would-you-use-a-structure-as-navigation-over-multiple-sections-channel-entries">Would you use a Structure as navigation over multiple sections (channel entries, indexes and singles)?</a></p>
  
  <p>My code below shows the active class being placed on the li tag but that doesn't work with the cache globally.</p>
  
  <p>Can it be done with Twig's replace filter?</p>
  
  <pre><code>{% cache globally for 3 years %}
    {% set entries = craft.entries.section('navigation') %}
  
    &lt;ul class="right"&gt;
      {% nav entry in entries %}
      &lt;li class="{{ entry.hasDescendants() ? 'has-dropdown' : "" }}{{ craft.request.segment(1) == entry.slug ? ' active' : "" }}"&gt;
        {# Check for entry type / get related entry #}
        {% if entry.type == 'customLink' %}
          {# Link to a custom url #}
          &lt;a href="{{ entry.customUrl }}"&gt;{{ entry.title }}&lt;/a&gt;
        {% elseif entry.type == 'relatedEntryLink' %}
          {% set linkedEntry = entry.relatedEntry.limit(1).first() %}
          &lt;a href="{{ linkedEntry.url }}"&gt;{{ entry.title }}&lt;/a&gt;
        {% else %}
          {# Link to a structure entry #}
          &lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;
        {% endif %}
        {# Repeat this for child entries #}
        {% ifchildren %}
        &lt;ul class="dropdown"&gt;{% children %}&lt;/ul&gt;
        {% endifchildren %}
      &lt;/li&gt;
      {% endnav %}
    &lt;/ul&gt;
  {% endcache %} 
  </code></pre>
  
Tags: <cache><navigation>
Title: Adding active class to globally cached navigation
ThreadText: # Adding active class to globally cached navigation
  
  (Asked by: username_0 on 2014-11-18)
  
  I have a structure which controls my main site navigation.
  It's the same across the site so it is best to cache globally as opposed to a cache of the navigation or every url.
  
  The last answer on this pages says that you can use Twig's replace filter to achieve this:
  [Would you use a Structure as navigation over multiple sections (channel entries, indexes and singles)?](https://craftcms.stackexchange.com/questions/1473/would-you-use-a-structure-as-navigation-over-multiple-sections-channel-entries)
  
  My code below shows the active class being placed on the li tag but that doesn't work with the cache globally.
  
  Can it be done with Twig's replace filter?
  
  ```
  {% cache globally for 3 years %}
    {% set entries = craft.entries.section('navigation') %}
  
    <ul class="right">
      {% nav entry in entries %}
      <li class="{{ entry.hasDescendants() ? 'has-dropdown' : "" }}{{ craft.request.segment(1) == entry.slug ? ' active' : "" }}">
        {# Check for entry type / get related entry #}
        {% if entry.type == 'customLink' %}
          {# Link to a custom url #}
          <a href="{{ entry.customUrl }}">{{ entry.title }}</a>
        {% elseif entry.type == 'relatedEntryLink' %}
          {% set linkedEntry = entry.relatedEntry.limit(1).first() %}
          <a href="{{ linkedEntry.url }}">{{ entry.title }}</a>
        {% else %}
          {# Link to a structure entry #}
          <a href="{{ entry.url }}">{{ entry.title }}</a>
        {% endif %}
        {# Repeat this for child entries #}
        {% ifchildren %}
        <ul class="dropdown">{% children %}</ul>
        {% endifchildren %}
      </li>
      {% endnav %}
    </ul>
  {% endcache %} 
  
  ```
  
  **Tags:** cache, navigation
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2014-11-18. Score: 18 | Accepted answer
  
  Yes, you can!
  
  The first thing you need to do is to add the entire cached content into a single variable:
  
  ```
  {% set navigation %}
      {% cache globally for 3 years %}
          {# YOUR CACHED CONTENT #}
      {% endcache %}
  {% endset %}
  
  ```
  
  Then you need to add some dummy placeholder tags on your `<li>` tag and your `<a>` tag which then can be used by `|replace` filter to make the replacement.
  
  For `<li>`
  
  ```
  <li class="{{ entry.hasDescendants() ? 'has-dropdown' : "" }} data-class-{{entry.slug}}">
  
  ```
  
  For `<a>` (You need to modify this for each different entry type)
  
  ```
  <a href="{{ entry.url}}" data-url="{{ entry.url }}">{{ entry.title }}</a>
  
  ```
  
  After all this you'll have special "tags" in your cached content that you can run some replacement on, like this:
  
  ```
  {{ navigation|replace({('data-url="' ~ craft.request.getUrl() ~ '"'): 'class="active"'})|replace({('data-class-' ~ craft.request.segment(1)): 'active'})|raw }}
  
  ```
  
  *You can run two `|replace` filters after each other, you could just split them up into two steps. Also, this code is untested - I just wrote it from my head so please be aware there might be some typos etc..*
  
  > **Comments:**
  > **username_0**: Thanks - great job - only need the active class on the li so just need the 1 filter. Cheers!  
  > **username_1**: If it solved your issue please approve the answer. Cherrio!  
  
  ---
  
  