Answers.Body: <p>You don't need to use Javascript/jQuery for this.</p>
  <p>You can get the the current url from <code>craft.app.request</code> in some way and do a check as you output your navigation.</p>
  <p>It looks like you have some custom fields for urls but, For instance, if you wanted to check the last url segment you could use <code>craft.app.request.segment(-1)</code> to get it. Then when outputting your css classes, check it against <em>whatever</em> and output the active class.</p>
  <pre><code>{% set currentPage = craft.app.request.segment(-1) %}
  
  then in your loop...
  
  &lt;li class=&quot;{{ thisUrl == currentPage ? 'active ' }} otherclasses&quot;&gt;
      &lt;a href=&quot;{{ foo }}&gt;Some title&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  <p>You can also get the full URL with <code>{{ craft.app.request.absoluteUrl }}</code>
  Or <code>{{ craft.app.request.pathInfo }}</code> to get the path</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-21T12:47:09.057Z
Answers.Text: Thanks a lot for your answer. I'm getting an error "Variable "thisUrl" does not exist" when I implement your code above.
Answers.UserDisplayName: DieselHashtag
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-27T12:37:08.703Z
Answers.Text: You'll need to do a bit of thinking and take a look at the documentation... in my example `thisUrl` is a placeholder for the URL you are checking against the currentPage. As you loop through your navigation nodes, `thisUrl` would be the URL for that node. So perhaps try `page.customUrl`. I can't be more specific because I don't know what the customUrl stuff is about or why you are doing that.
Answers.UserDisplayName: foamcow
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-21T09:30:37.533Z
Answers.LastActivityDate: 2021-04-21T09:30:37.533Z
Answers.UserDisplayName: foamcow
Body: <p>I'm currently using the below jQuery but it's buggy as it relies on looking for 'similar' URL and not the exact URL.
  Is there a way it can be done just using Twig?</p>
  <pre><code>{% set mainNavigation = craft.entries.section('mainNavigation').all() %}
  
  &lt;div class=&quot;navbox-collapse collapse&quot; id=&quot;navbar-menu&quot;&gt;
      &lt;ul class=&quot;nav&quot; data-in=&quot;fade-In-Down&quot; data-out=&quot;fade-Out-Up&quot;&gt;
  
      {% nav page in mainNavigation %}
  
          &lt;li  class=&quot;{% if page.hasDescendants() %}topLevel dropdown {% else %}singleLevel{% endif %}&quot;&gt;
          
              {% if page.customUrl|length %}
                  &lt;a {% if page.hasDescendants() %} class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; {% endif %} href=&quot;{{ page.customUrl }}&quot;&gt;&lt;span&gt;{{ page.title }}&lt;/span&gt;&lt;/a&gt;
              {% else %}
                  &lt;a {% if page.hasDescendants() %} class=&quot;dropdown-toggle pageLink&quot; data-toggle=&quot;dropdown&quot; {% endif %} href=&quot;{{ page.selectEntry.one().url }}&quot;&gt;&lt;span&gt;{{ page.title }}&lt;/span&gt;&lt;/a&gt; 
              {% endif %}
              
              {% ifchildren %}
                  &lt;ul class=&quot;dropdown-menu megamenu-content {% if page.doubleColMenu.contains('twoxcol') %}twoxcol {% endif %}&quot;&gt;
                      {% children %}
                  &lt;/ul&gt;
              {% endifchildren %}
          &lt;/li&gt;
              
      {% endnav %}
  &lt;/div&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
      $(function(){
      var current = location.pathname;
      $('#navbar-menu li a').each(function(){
      var $this = $(this);
      // if the current path is like this link, make it active
      if($this.attr('href').indexOf(current) !== -1){
          $this.addClass('active');
      }
  })
      })
  &lt;/script&gt;
  </code></pre>
  
Tags: <craft3><templating><jquery>
Title: How can I make make the class of an entry link "active" if entry is the current url?
ThreadText: # How can I make make the class of an entry link "active" if entry is the current url?
  
  (Asked by: username_0 on 2021-04-21)
  
  I'm currently using the below jQuery but it's buggy as it relies on looking for 'similar' URL and not the exact URL.
  Is there a way it can be done just using Twig?
  
  ```
  {% set mainNavigation = craft.entries.section('mainNavigation').all() %}
  
  <div class="navbox-collapse collapse" id="navbar-menu">
      <ul class="nav" data-in="fade-In-Down" data-out="fade-Out-Up">
  
      {% nav page in mainNavigation %}
  
          <li  class="{% if page.hasDescendants() %}topLevel dropdown {% else %}singleLevel{% endif %}">
          
              {% if page.customUrl|length %}
                  <a {% if page.hasDescendants() %} class="dropdown-toggle" data-toggle="dropdown" {% endif %} href="{{ page.customUrl }}"><span>{{ page.title }}</span></a>
              {% else %}
                  <a {% if page.hasDescendants() %} class="dropdown-toggle pageLink" data-toggle="dropdown" {% endif %} href="{{ page.selectEntry.one().url }}"><span>{{ page.title }}</span></a> 
              {% endif %}
              
              {% ifchildren %}
                  <ul class="dropdown-menu megamenu-content {% if page.doubleColMenu.contains('twoxcol') %}twoxcol {% endif %}">
                      {% children %}
                  </ul>
              {% endifchildren %}
          </li>
              
      {% endnav %}
  </div>
  
  <script type="text/javascript">
      $(function(){
      var current = location.pathname;
      $('#navbar-menu li a').each(function(){
      var $this = $(this);
      // if the current path is like this link, make it active
      if($this.attr('href').indexOf(current) !== -1){
          $this.addClass('active');
      }
  })
      })
  </script>
  
  ```
  
  **Tags:** craft3, templating, jquery
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2021-04-21. Score: 1
  
  You don't need to use Javascript/jQuery for this.
  
  You can get the the current url from `craft.app.request` in some way and do a check as you output your navigation.
  
  It looks like you have some custom fields for urls but, For instance, if you wanted to check the last url segment you could use `craft.app.request.segment(-1)` to get it. Then when outputting your css classes, check it against *whatever* and output the active class.
  
  ```
  {% set currentPage = craft.app.request.segment(-1) %}
  
  then in your loop...
  
  <li class="{{ thisUrl == currentPage ? 'active ' }} otherclasses">
      <a href="{{ foo }}>Some title</a>
  </li>
  
  ```
  
  You can also get the full URL with `{{ craft.app.request.absoluteUrl }}`
  Or `{{ craft.app.request.pathInfo }}` to get the path
  
  > **Comments:**
  > **username_0**: Thanks a lot for your answer. I'm getting an error "Variable "thisUrl" does not exist" when I implement your code above.  
  > **username_1**: You'll need to do a bit of thinking and take a look at the documentation... in my example `thisUrl` is a placeholder for the URL you are checking against the currentPage. As you loop through your navigation nodes, `thisUrl` would be the URL for that node. So perhaps try `page.customUrl`. I can't be more specific because I don't know what the customUrl stuff is about or why you are doing that.  
  
  ---
  
  