How to add active class to homepage nav list item Someone provided a solution, via the Craft Google community, but it was suggested that I also post it here for others to use.

&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="{{ siteUrl }}" {% if craft.request.firstSegment == 'homepage' %} class="active" {% endif %}&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="{{ url('work') }}" {% if craft.request.firstSegment == 'work' %} class="active" {% endif %}&gt;Work&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="{{ url('about') }}" {% if craft.request.firstSegment == 'about' %} class="active" {% endif %}&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;


The above was adapted from the demo site install (I think) and although 'work' and 'about' work fine 'homepage' did not.  I used 'homepage' as this is the 'handle' in the craft sections part of the cms so I thought that would be correct.

I initially found this How can I add a dynamic &quot;active&quot; CSS class to the navigation on any given page? but not being that dev focused found the many alternatives a bit confusing.

It was suggested that I add a 'section' to the homepage template and so I added {% set section = "home" %} after {% extends "_layout" %} in the homepage  index.html.

I then amended my first &lt;li&gt; from above to be just

&lt;li&gt;&lt;a href="{{ siteUrl }}" {% if section == 'home' %} class="active" {% endif %}&gt;Home&lt;/a&gt;&lt;/li&gt;


which worked as required.

I hope that helps.

If anyone can explain why my original doesn't work, in layman's terms that would be much appreciated.

Thanks

Laurence
Unless the URL is domainname.com/homepage then your class will not get added.

Are you using template layouts? If you are you could have something like this in your _layout

{% block bodyClass %}{% if bodyClass is defined %}&lt;body class="{{ bodyClass }}"&gt;
{% else %}&lt;body&gt;
{% endif %}


Then in your home template you would set it like so:

{% set bodyClass = 'CLASSNAME' %}


OR you could something like this in your nav:

&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="{{ siteUrl }}" {% if craft.request.firstSegment == '' %}class="active"{% endif %}&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="{{ url('work') }}" {% if craft.request.firstSegment == 'work' %} class="active" {% endif %}&gt;Work&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="{{ url('about') }}" {% if craft.request.firstSegment == 'about' %} class="active" {% endif %}&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;


#

Hopefully that helps. If not you can always look at this post with other methods:

How can I add a dynamic &quot;active&quot; CSS class to the navigation on any given page?