Textpattern tips, tutorials and code snippets

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>

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.

4 Comments Comment feed

Hi Dave, you are right – its usually better to use section_list instead, but in simple sites this code is fine. Besides, the idea is to demonstrate the various options users have. The next menu tip is coming today – with section_list!

Awesome timesaver… This simple little tutorial worked like a champ

Thanks for making this available.

Craig Valadez

What if I use articles instead of categories? Like:

<a href="<txp:site_url />something.htm" title=""<txp:if_article_id id="1"> class="active"</txp:if_article_id>>something</a>

Hi cosmo,

You can also try this:

<a href="<txp:site_url />something.htm" title=""<txp:if_article_id id='<txp:article_id />'> class="active"</txp:if_article_id>>something</a>

Add a comment

Use Textile help to style your comments