Highlight the current page in your navigation

EE Insider Tips
Sponsored by Mijingo's EE 2 Screencasts

ExpressionEngine mini-howtos created by the EE Insider community.

Posted by JonnyUK
June 08, 2009
2 people have found this tip helpful.

Using the segment variables in your template, you can highlight the current page in your navigation.

For primary pages, this is pretty simple. All you need to do is check segment 1 to see if it matches up with a particular navigation item:

<ul>
<li class="{if "{segment_1}" == ""}selected{/if}"><a href="/">Home</a></li>
<li class="{if "{segment_1}" == "about"}selected{/if}"><a href="/about">About</a></li>
<li class="{if "{segment_1}" == "contact"}selected{/if}"><a href="/contact">Contact</a></li>
</ul> 

Therefore if you visited http://www.example.com/about, the following would be produced:

<ul>
<li class=""><a href="/">Home</a></li>
<li class="selected"><a href="/about">About</a></li>
<li class=""><a href="/contact">Contact</a></li>
</ul> 

Then in your CSS, you can style elements with the class “selected” differently. For example, to make the selected list item text bold:

<style type="text/css">
ul li.selected {
font-weight: bold;
}
</style> 

However, you’ll also notice that if you visited http://www.example.com/ABOUT (in capital letters), EE will still serve up the correct page (because template groups and templates are not case-sensitive) yet your navigation will not be highlighted.

To get around this, you can use a little PHP to convert {segment_1} to lowercase with the function strtolower(), and then check it:

<ul>
<li class="<?php if ("" == strtolower("{segment_1}")) echo "selected"; ?>"><a href="/">Home</a></li>
<li class="<?php if ("about" == strtolower("{segment_1}")) echo "selected"; ?>"><a href="/about">About</a></li>
<li class="<?php if ("contact" == strtolower("{segment_1}")) echo "selected"; ?>"><a href="/contact">Contact</a></li>
</ul> 

Note: In order to use PHP in your templates you must first enable it in the template preferences. In this case, you would want PHP to be set to parse on OUTPUT.

As for dynamic sub-page navigation where your URL’s link to specific entries in a weblog, you can do something similar however in this case you would need to compare your segment variable with your entry {url_title} variable, for example:

{exp:weblog:entries weblog="about_subpages" dynamic="off"}
{if "{count}"=="1"}<ul>{/if}

<li class="<?php if ("{url_title}"==strtolower("{segment_2}")) echo "selected"; ?>"><a href="/about/{url_title}">{title}</a></li>

{if "{count}"=="{total_results}"}</ul>{/if}
{/exp:weblog:entries} 