<p>Depends on your URL structure ultimately and whether you have sub pages, but I think the easiest way to do it would be something like:</p>

<pre><code>{% if mainNav.navitems|length %}
 {% for row in mainNav.navitems %}
  &lt;li&gt;
    &lt;a href="{{ url(row.url) }}"
     {%- if craft.request.segment(1) == row.url %}class="active"{%- endif %}&gt;
     {{ row.name }}
    &lt;/a&gt;
  &lt;/li&gt;
 {% endfor %}
{% endif %}
</code></pre>

<p>You don't have to use the <code>segment(1)</code> method if it doesn't suit, take a look at <a href="https://craftcms.com/docs/templating/craft.request" rel="nofollow noreferrer">the request docs</a> to find something that suits your URLs</p>

CC BY-SA 3.0
2017-06-08T09:47:45.507Z
Thanks alec, I managed to solve it just before you answered. But in your one the active class would be added to the <a> tag, so wouldn't work as needs to go on the <li>
mention79
CC BY-SA 3.0
2017-06-08T09:43:48.230Z
2017-06-08T09:43:48.230Z
Alec Ritson
<p>I have solved it <code>{% if row.url == craft.request.firstSegment %}class="active" {% endif %}</code></p>

<p>Here's the full code.</p>

<pre><code>{% if mainNav.navitems|length %}
{% for row in mainNav.navitems %}
  &lt;li {% if row.url == craft.request.firstSegment %}class="active" {% endif %}&gt;&lt;a href="{{ row.url }}"&gt;{{ row.name }}&lt;/a&gt;&lt;/li&gt;
{% endfor %}
{% endif %}
</code></pre>

CC BY-SA 3.0
2017-06-08T09:42:39.680Z
2017-06-08T09:42:39.680Z
mention79
<p>I have a simple nav set up using Globals in a table, but I'm struggling to get it to add an active class to only the active page.</p>

<p>The below code adds the nav links, but I need to know what to add to it to get the active class on only the current page.</p>

<p>Need a little help please?</p>

<pre><code>{% if mainNav.navitems|length %}
    {% for row in mainNav.navitems %}
        &lt;li&gt;&lt;a href="{{ row.url }}"&gt;{{ row.name }}&lt;/a&gt;&lt;/li&gt;
    {% endfor %}
{% endif %}
</code></pre>

<p><a href="https://i.sstatic.net/N46Pm.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/N46Pm.png" alt="Main Nav"></a></p>

<navigation>
Add active class to nav created from globals
# Add active class to nav created from globals

(Asked by: username_0 on 2017-06-08)

I have a simple nav set up using Globals in a table, but I'm struggling to get it to add an active class to only the active page.
The below code adds the nav links, but I need to know what to add to it to get the active class on only the current page.
Need a little help please?
{% if mainNav.navitems|length %}
    {% for row in mainNav.navitems %}
        {{ row.name }}
    {% endfor %}
{% endif %}

**Tags:** navigation

---

## 2 answers

### Answer by username_1 on 2017-06-08. Score: 2

Depends on your URL structure ultimately and whether you have sub pages, but I think the easiest way to do it would be something like:
{% if mainNav.navitems|length %}
 {% for row in mainNav.navitems %}
  
    
     {{ row.name }}
    
  
 {% endfor %}
{% endif %}

You don't have to use the segment(1) method if it doesn't suit, take a look at the request docs to find something that suits your URLs

> **Comments:**
> **username_0**: Thanks alec, I managed to solve it just before you answered. But in your one the active class would be added to the <a> tag, so wouldn't work as needs to go on the <li>  

---

### Answer by username_0 on 2017-06-08. Score: 1

I have solved it {% if row.url == craft.request.firstSegment %}class="active" {% endif %}
Here's the full code.
{% if mainNav.navitems|length %}
{% for row in mainNav.navitems %}
  {{ row.name }}
{% endfor %}
{% endif %}


---

