Best practices: Location-aware Navigation in EE2?

Question

Recently upgraded an older Expression Engine site from 1.x.x to 2.7.3, and looking to upgrade to 2.9.0 and optimize some of the slower code. One of the issues I'm working on is getting rid of a lot of embed tags, which were used in the old site to embed navigation, using embed variables to set classes to display active links in the embedded navigation template.

I'm looking for some general guidance on Expression Engine best practices to do something like that - with the goal of finding a solution that can do it with the least queries and load the fastest, even when dealing with a lot of conditionals in the navigation.

This is what I want to happen: when on site/about, the navigation menu will be rendered like this:

<ul>
<li><a class="selected" href="{site_url}about">About Us</a></li>
<li><a href="{site_url}about/community">Community</a></li>
<li><a href="{site_url}about/people">Directory</a>
</ul>

The idea is that the "selected" class changes depending on the template that's being loaded to let users know where they are in the site..

So far, I've considered the following possibilities:

1. Use preparse in Low Variables:

   Template: site/about

   {exp:low_variables:single var="lv_subnav_about" preparse:selected="about"}
   

   Low Variable: lv_subnav_about

   <ul>
   <li><a {if selected == 'about'} class="selected"{/if}  href="{site_url}about">About Us</a></li>
   <li><a {if selected == 'community'} class="selected"{/if}  href="{site_url}about/community">Community</a></li>
   <li><a {if selected == 'people'} class="selected"{/if}  href="{site_url}about/people">People: Directory</a>
   </ul>
   

2. Revising the scheme to use segments instead of passing variables to accomplish the same goal. This would still probably require the same number of conditional statements in the embed/low variable, but would using segments help at all, performance-wise?
3. Using the new (in EE 2.8.x) layout variables to do the same thing, i.e. {layout="site/normal" selected="about"}. This would have another advantage in that I could create layouts that take care of other embeds I'm trying to get rid of - header/footer/sidebar/etc.

Please let me know if you have any ideas on what the best way to accomplish this goal might be, even when dealing with much more complex navigation (passing multiple variables to indicate category and page, etc) - thanks!

Answer 1

Using segments as Anna described in her answer definitely works well for some sites. But it can get tedious on large or deep navigation trees and is not practical when the client needs to manage the navigation.

In those cases, or if you just want to cut out all the conditionals, take a look at NavEE. It's very flexible and easy to use. Well worth the price. Just build out a navigation tree by linking to Pages entries, regular entries, templates, or custom URL and then NavEE does the rest.

As an example of the tag use, here is a main nav tag from a current project of mine. It generates a dropdown navigation with the CSS classes I want to use for the active parent and active page styles. It does a great job of applying the active classes dynamically based on the requested page.

{exp:navee:custom 
    nav_title="main" 
    wrap_type="ul" 
    class="sf-menu" 
    selected_class="active"
    selected_class_on_parents="true"
    parent_selected_class="active-parent"
    max_depth="2"
}
    <li><a href="{link}" class="{class}">{text}</a>{kids}</li>
{/exp:navee:custom}

And even if you run into a more unusual navigation scenario should be able to adapt NavEE to your situation by using one of the many parameters or additional options.

Answer 2

I personally always take the route of using segment conditionals to set my active state CSS class. It's easy to code and manage since it's handled in one template.

<li><a {if segment_1 == 'about'}class="selected"{/if}  href="">About Us</a></li>