Simple navigation with Low Variables

How to build navigation in ExpressionEngine has always been a debatable issue amongst developers. Some use Categories, maybe a devoted Weblog or Channel, others just hard code navigation in the templates. Third party options would include Navigator, Structure or maybe even some kind of Playa setup. But since version 1.1.6, Low Variables offers a simple and elegant solution to building navigation, too.

Template tags

The secret lies in Low Variables’ template tags: {exp:low_variables:parse}. Apart from parsing variables early (like path.php vars) or late (like user defined template vars) in the parsing order, you can parse Low Variables using the template tags, which allows you to do extra stuff apart from just a simple string replace.

For example, in the case of multiple valued variables, you can loop through the values. This means you could create a simple navigation menu that your users can manage.

Create a Select variable

First you need to create a variable with type Select. In this example, we’ll name the variable low_site_menu. You can turn early parsing off, since we’re going to use the template tags to parse it. In the Options field, we’ll add the menu items, putting each item on a new line and separating paths and labels with  : . For example:

/ : Home
about-us : About us
services : Services
news : News
contact : Contact
pages/copyright : Copyright

Next, we’ll allow multiple values to be selected and select the Drag and drop lists as interface. This means your user can turn off any menu item, as well as sort them in a preferred order.

Edit your template

In your template, add the following code:

<ul id="nav">{exp:low_variables:parse var="low_site_menu" multiple="yes"}
  <li><a href="{path="{value}"}">{label}</a></li>{/exp:low_variables:parse}
</ul>

That’s it! You could even enter full urls as values and omit the {path=""} variable, so external menu items are possible as well. This approach is very efficient; I compared it to using a {exp:weblog:categories} tag instead, and saved up to 3 queries per request, depending on caching settings.

March 4th 2010 | Add-Ons, ExpressionEngine, Low Variables | 1 comment

For EE Add-ons, go to Low