Content last modified Monday 6 March 2017
hop to #bottom
About It:
Rate it:
  • Helpful?
  • 8 Yes
  • 0 No
Flag it:

If you'd like to provide updated information and do not have access to directly edit, please contact the site admin; thanks!

Dynamic Sub Menu with active class

Very Useful for a typical business-style web site with sub-pages in a section.

I searched for quite some time before I found the bits and pieces to put together this recipe for a dynamic sub navigation with a class=“active” attaching itself to the current menu item. This allows you to apply styling to the active menu item without having to hard code the links in your page (template) every time you add an article.

I use the txp:article_custom tag in combination with the rvm_if_this_article plugin to achieve this functionality.

I will give you a step by step scenario to accomplish the desired results. If my illustration seems painfully detailed, it is in an effort to make the information digestible to the novice TXP developer.

The sample scenario:

You have a “section” in your site called “about” which uses an “about” “page” (template).

First install and activate the following plugin: rvm_if_this_article
found here:

Within the “about” “page” you have the following two snippets of code—one for the navigation and one for the article output (novice note: you must have some articles assigned to the “about” “section”):

<ul id="subnav">
  <txp:article_custom form="subnav" limit="99" section="about" sort="Posted asc" />

<div id="content"> 
  <txp:article form="static" limit="1" sort="Posted asc" />

The forms you are calling:

subnav (article-form):

<li<txp:rvm_if_this_article> class="active"</txp:rvm_if_this_article>><a href="<txp:permlink />"><txp:title /></a></li>

static (article-form):

<h2><txp:title /></h2>
<txp:body />

That’s it.

This will create the following html for your page (substitute your own articles).

<ul id="subnav">
  <li><a href="http://dynamicnav.local/about/about-article1">About Article#1</a></li>
  <li><a href="http://dynamicnav.local/about/about-article2">About Article#2</a></li>
  <li class="active"><a href="http://dynamicnav.local/about/about-article3">About Article#3</a></li>

<div id="content"> 
  <h2>About Article#3</h2>
  <p>Article Content...</p>

Just style your .active links and you’re good to go.

btw: if there is a better way to do this now please post a tip in Texpattern Resources.

Side note: It beats adding the following type of hard-code to my template every time I create a new article just to get the class=“active” effect.

<a href="<txp:site_url />identity/shine-like-stars"<txp:if_article_id id="13"> class="active"</txp:if_article_id>>Shine Like Stars</a>

Although, it sure was a useful solution when I needed it.

Article Request Count:
Posted here:
31 Oct 2007
Article modified:
08 Nov 2007

Comments/questions? Leave a message in the form.

Commenting is closed for this article.

Commented (5)


You could further automate things with the amazing asy_wondertag plugin

Just wrap your tag in <asy_wondertag> and replace your section name with <txp_section/> in your article_custom tag and you can then use this code on every page — you won’t need a separate template for every section.

example (not sure why the textile code isn’t working):

bc. <txp:asy_wondertag><txp:article_custom form=“subnav” limit=“99” section=”<txp:section/>” sort=“Posted asc” /></txp:asy_wondertag>


Isn’t this solved very nicely with the if_article_id tag already?

<a href=”<txp:permlink />”<txp:if_article_id> class=“active”</txp:if_article_id>><txp:title /></a>

I think that this plugin will automatically put that CSS class selector there when a certain page is being opened. In your example article’s id number should be informed manually to each and every one link in navigation to achieve same results.

hey, welcome to my channel. If you want to tech how to remove watermark by step guide bangla tutorial.

Follow this link :

Subscribe to this article's comments RSS feed. [ ? ]   View Recent Comments across the site.

Would you care to write a comment?

You know you want to visit the Archives.




There are also tag clouds, 'cause those are fun.
Published with Textpattern