Highlighting menu items with ExpressionEngine

There are indeed are variety of means by which you can highlight a menu item of the current page you're on. One way would be to use ExpressionEngine's embedded template functionality which is very sophisticated. The downside in my view is that you have to — as the name implies &mdash embed a template which may not always be the optimal solution, depending on your amount of embedded templates and your general structure preferences. I usually try to not use too many embedded templates in order to allow for less performance overhead, but your preferences may vary and technically, there is nothing wrong with going that route.

So, to highlight your current navigation item, you would create an embed variable.

This is the standard structure of an embed variable:

1. {embed="mytemplate" parameter name == "parameter value"}

Example:

1. {embed="navigation" sausage == "frankfurter"}

In plain text this means your embed variable consists of the parameter name of sausage with a parameter value of frankfurter.

For my navigation, I would then create a parameter value for each navigational element within each template which would look like the following for my portfolio index page:

Rinse and repeat for each page you link to in your navigation.

Next, you will want to create the embedded template. I use a separate template group for my embedded templates and have assigned it the name inc. My navigation template is called _navi, hence, in order for EE to understand that we want to highlight the current navigation item, we have to tell it to do so by implementing conditional variables, in this case the if statement.

Another really nifty way of having your current navigation item highlighted, is by using Solspace's Selected plugin. It's extremely easy to set up, and does not require any embedding or the use of conditionals for simple setups.

If, for example, you had a list of weblog entry links in your left column and the single entry in your right column and wanted to highlight the current item a user was on, then you would use something like this:

1. <ul>
2. {exp:weblog:entries weblog="{my_weblog}"}
3. {exp:selected item="{segment_2}" replace="class='selected'"}
4. <li {selected_{url_title}}><a href="{/comment_url_title_auto_path}" title="{title}">{title}</a></li>
5. {/exp:selected}
6. {/exp:weblog:entries}
7. </ul>

(remove the slash in the comment_url_title_auto_path variable. EE automatically turns it into a link in my entries).

You can also use a static menu:

1. <ul>
2. {exp:selected item="{segment_1}" replace="class='selected'"}
3. <li {selected_news}><a href="/news/" title="Latest News">Latest News</li>
4. <li {selected_about}><a href="/about/" title="About">About</li>
5. {/exp:selected}
6. </ul>

Here, the second part of the parameter is your actual value, in this case it is the first segment (segment_1) that is replaced, so if you want to highlight a segment, you'd give the second part of the paramter the exact url title. In my example, the exact url title is news and about respectively.

There are many more uses for the Solspace plugin, but here I've highlighted two possibilities of its use.