Auto Navigation Highlighting in ExpressionEngine

by Jonathan Longnecker

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 smile .

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

  • class you wanted to change instead of the 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.

    • January 30, 2008

    Tutorials, ExpressionEngine

    Comments

    1. 1

      Tim Van Damme - Jan 30, 2008

      Nice tip! I’m wondering: Why don’t you guys use the ID of the Body to show which page you’re currently browsing? This way, you can manipulate multiple elements with just one change. Something like “Write name of current section here”.

      Just thinking out loud…

    2. 2

      tzEEstuff - Jan 31, 2008

      This same technique could be used in multiple elements on the page too, since it is a class and not an ID, different CSS rules could be added to different elements.

      Thanks J, I was wondering just how to accomplish a persistent sort of navigation.

    3. 3

      Ty - Jan 31, 2008

      Oh yeah, don’t let the EE police catch you putting a space in between the words Expression+Engine, they had a recent blog post stating it’s “ExpressionEngine” wink

    4. {screen_name}

      Jonathan Longnecker - Feb 09, 2008

      Hey Tim, that’s certainly another way to do it. Just seems like you’d end up with a ton of extra id’s as opposed to that one “current” class. We usually use body id’s for changes in structure or layout. I’m going to file it away for future use, though cheese .

      Ty! Man, I didn’t even remember that post, but you’re right. I have updated througout the site as necessary! Extra spaces are eradicated.

    5. 5

      Richard Angstmann - Mar 27, 2008

      Hi,

      This technique doesn’t seem to work for me on my site http://www.gopa.org.uk/ee/

      I understand exactly how the code works and what it should be doing, and I have added all the necessary code in what are the correct places, yet it seems that the “active” class is being applied to ALL menu items and not just the current page.

      I am baffled, its bed time and I will return to this soon. Its a shame it doesnt seem to work for me because it seems like such a simple technique!

    6. {screen_name}

      Jonathan Longnecker - Mar 28, 2008

      Hmmm….it seems to be parsing the active class correctly now….did you get it fixed? I don’t see any difference visually on the active classes, though.

    7. 7

      Richard Angstmann - Mar 28, 2008

      Hi Jonathan,

      That is exactly the problem… the active class is not showing visually. I slightly re-did the implementation based on some info on the EE forum, however I believe it is the same implementation as suggested above.

      I guess I need to revisit my stylesheet and see why the active class isn’t kicking in.  You say its parsing the active class correctly now - where can you see this?

    8. {screen_name}

      Jonathan Longnecker - Mar 28, 2008

      I just looked at your rendered HTML and the active class was only being applied to the current page, so it’s just a CSS issue. Seems like you’ve done the EE part right.

      Oh! I just realized you put the active class on the < li > and not the < a >. I’ve never had any luck getting my active classes to show on the < li >. Switch it around in your EE code so it puts the class on the < a > element in the list and then change your CSS to something like li a.active—-style, etc… Make sense?

    9. 9

      Richard Angstmann - Mar 28, 2008

      Brilliant! That seems to have worked! Many thanks for taking the time to respond smile I am learning so much about EE at the moment that my head is full! Sometimes its easy to miss relatively straightforward things when that happens. smile

    10. {screen_name}

      Jonathan Longnecker - Mar 28, 2008

      Sweet! Glad everything’s working now smile I’ve never understood why the class on the < li > didn’t work…just filed it away so I wouldn’t have to wrestle on each new project. Good luck!

    11. 11

      N8 - May 29, 2008

      My alternative: I’ve been a big fan of not having a link on a selected menu item so my code looks like this (somewhat redundant though).

      Before
      <li><a {if ‘{embed:loc}’ == ‘home’}class=“current”{/if}  href=”./”>Home</a></li></p>

      After
      <li{if “{embed:loc}” == “home”} class=“current”>Home{if:else}><a href=”./”>Home</a>{/if}</li></p>

      Note: The double quotes around the evaluation are important!  This also requires css changes, but I feel better about it in the long run.

    12. {screen_name}

      Jonathan Longnecker - May 30, 2008

      @N8, fabulous idea! Even more semantical smile Thanks for sharing.

    13. 13

      Clyde Hill - Jun 12, 2008

      A+, i am sure your site will come in handy on my quest for total code greatness.

    14. {screen_name}

      Jonathan Longnecker - Jun 13, 2008

      Awesome, Clyde! Go forth and dominate the ways of the internets!

    15. 15

      swim - Jun 14, 2008

      hi , great post !

    16. 16

      forex - Jul 01, 2008

      hi , very useful inforamtion ! tnx

    17. 17

      buy headlight cleaner - Jul 16, 2008

      Great post there..Auto Navigation was always a tough subject for me and this cleared a lot of lingering doubts..!

    18. 18

      Dan - Oct 30, 2008

      I use path conditionals instead:

      {if segment_1==“art”}class=“active”{/if}

      You can get much more elaborate designs this way, testing for multiple path levels.

    19. 19

      diana - Jul 13, 2009

      Is there any way to set loc={page_uri} or something dynamic like that?

    20. {screen_name}

      Jonathan Longnecker - Jul 13, 2009

      @diana I’m not sure; you’ll probably want to check the docs or the forums.

    21. 21

      Brent - Oct 01, 2009

      I’m hoping you will be able to rescue me on this one: http://expressionengine.com/forums/viewthread/130780/

      Any ideas on why this isn’t working for me? I’d really appreciate it.

    22. 22

      Raul Ferrer - Oct 10, 2009

      Hey Jonathan!

      Nice little trick, however I’m with tzEEstuff, aiming for a “current"like effect with the body ID. Since the ID is going to be there anyway, then you don’t need to use the class.
      Plus the code is even easier with a <body id=”{segment_1}”> and then you don’t need all those conditionals on the menu.

      cheers
      Raul

    23. 23

      CJ - Feb 17, 2010

      I have tweaked your method to work for dynamic navigation items:

      {embed=“global/nav” loc=”<em>{entry_id}</em>”}

      The global navigation include loops through ALL pages and writes them into a navigation list:

      {exp:weblog:entries weblog=“page” dynamic=“off”}

      (Note: “dynamic” is switched off so the loop isn’t contextual to the current page)

      Then we highlight the item which matches the current item.

      {if {embed:loc} == {entry_id}}class=“current”{/if}

      Thanks,

      CJ

    24. 24

      Michael Kitchens - May 19, 2012

      Brilliant, thanks so much for making this easy to understand!  A big mahalo (thanks!) from Hawaii!

    Behold our Amazing Portfolio

    Check it Out