Auto Navigation Highlighting in ExpressionEngine

We’ve been using this technique for a while now and it works great! We always take the most used parts of a site and put them in templates for easy access when putting together a site. But what happens when you want to highlight the navigation to show the user where they’re at? Enter this cool trick! And yes, you have to be using ExpressionEngine .

Alright, say this is your navigation code:

<ul>
  <li><a class="current" href="./">Home</a></li>
  <li><a href="dont_hire/">Don’t Hire Us</a></li>
  <li><a href="portfolio/">Portfolio</a></li>
</ul>

Notice the current class. I’ve styled that in my CSS to show that I’m on that page (for this site it would be white with a star to the left). I’m going to use Expression Engine’s if and loc tags to automate the process. In my navigation template, I setup the code like this:

<ul>
  <li><a {if ‘{embed:loc}’ == ‘home’}class="current"{/if}
  href="./">Home</a></li>
  <li><a {if ‘{embed:loc}’ == ‘dont_hire’}class="current"{/if}
  href="dont_hire/">Don’t Hire Us</a></li>
  <li><a {if ‘{embed:loc}’ == ‘portfolio’}class="current"{/if}
  href="portfolio/">Portfolio</a></li>
</ul>

The name after the double equal signs should quickly describe what page it is. Also, you can move the entire if expression around; for example if it was the <li> class you wanted to change instead of the <a> class. So once this is set up, we’re going to use the “Don’t Hire” page as an example. We need to embed the navigation template like normal, but add one small addition:

{embed="global/nav" loc="dont_hire"}

Yep, that loc= is all you need. Just change what’s in the quotation marks depending on what page you’re on and match it to what you put after the double equal sign up above. This is great because now we can call that same navigation all over the site and have one easy place to update it without breaking out current classes. Here’s the rendered code:

<ul>
  <li><a href="./">Home</a></li>
  <li><a class="current" href="dont_hire/">Don’t Hire Us</a></li>
  <li><a href="portfolio/">Portfolio</a></li>
</ul>

Hope you find this useful. I sure do.