The Question

How do you easily highlight the current page in your ExpressionEngine site's navigation?

The Solution

I am assuming that you understand how to set the active class in your CSS file and did not include the the id's, classes or CSS in the below code for simplicity's sake. If not check out this article by Jon Hicks.

You use a combination of ExpressionEngine's URL segment variable and conditional global variables. You start by using an IF statement. Within the IF statement compare the current page's URI to the value of the segment variable value like so: {if segment_1 == "about"}snippet{/if}. If these two values are the same then the snippet of code held within the IF statement will display.

This example will work for most cases.

However, there may be a time where you use more then one template to display a single section of your site's content. For example, you may use the "services" template to show a list view of all your services and use a "service" template to display a single service. In this case you will need to use another one of ExpressionEngine's operators to achieve the same result.

By adding the OR operator you can easily highlight the same item in your navigation for multiple URI's like so: {if segment_1 == "services" OR segment_1 == "service"}. Below I've added some code for you to work with.

The Code

<ul id="navigation">
     <li><a href="{site_url}"{if segment_1 == ""}class="active"
{/if}>Home</a></li>
     <li><a href="{site_url}"{if segment_1 == ""}class="active"
{/if}>About</a></li>
     <li><a href="{site_url}"{if segment_1 == "services" OR
 segment_1 =="service"}class="active"{/if}>Services</a></li>
</ul>