TXP Tips

Simple navigation menu with an active class

Here is a simple method for creating an easily updatable navigation menu, with an active CSS class applied.

Create a form called “menu”

Add the following to a new form, then enter the name “menu” and type “misc”. Save.

<ul id="main_menu">
<li><a href="<txp:site_url />articles" <txp:if_section name="articles">class="active" </txp:if_section>>Articles</a></li>
<li><a href="<txp:site_url />archive" <txp:if_section name="archive">class="active" </txp:if_section>>Archive</a></li>
<li><a href="<txp:site_url />contact" <txp:if_section name="contact">class="active" </txp:if_section>>Contact</a></li>
</ul>

The above creates a unordered list that uses if_section to check which section the user is in, then apply an active class as a navigational aid.

Add some style

#main_menu li a.active {text-decoration: underline; font-weight: bold;}

An example style for your active class.

Place the menu in your page template

<txp:output_form form="main_menu" />

A very simple and easy method. The only downside is that you have to hard code the menu, but for small sites that require limited updates it is perfect!

Note: See the other menu tips – Drop down menu using only TXP tags, and Navigation menu using TXP tags.