Navigation menu using only TXP tags
Textpattern offers many ways to create and manage your navigation menus using the in-built tags.
In this follow up to the previous tip on creating a simple navigation menu, we shall create a navigation menu that will be automatically updated if you add a new section or category.
Note: You may also be interested in the drop down menu using TXP tags.
Create a form called menu
<h3>Sections</h3>
<txp:section_list sections="archive,photos,about,contact" wraptag="p" include_default="1" default_title="journal" active_class="active" />
<h3>Categories</h3>
<txp:category_list break="br" type="article" exclude="fairy-tales,silly-stories" wraptag="p" active_class="active" />
Save the form as type misc and save. To explain the attributes:
The call to txp:section_list will output a list of your sections. In this example, we are telling TXP to output the following sections in the order they are written: sections="archive,photos,about,contact". This allows for greater flexibility in the display of your menu items.
The include_default="1" default_title="journal" attributes also allow for a great degree of flexibility. In this example, we are including the default section but giving it the name journal. This means that a menu item called journal will lead the user to the homepage.
A relatively new attribute called active_class allows you to set an active CSS class as a navigational aid.
To create a navigation menu from our article categories, we can use the txp:category_list tag. Let’s go through the attributes in our example:
break="br" is the (X)HTML tag used to separate list items. We don’t really need to, because br is the default. The next part is interesting – type="article" tells Textpattern to use the article categories. You could also use type="image" to output your image categories! The exclude attribute exclude="fairy-tales,silly-stories" tells Textpattern to not display the fairy-tales and silly-tales article categories.
Place the form in your page template
<txp:output_form form="menu" />
And that’s it! A simple menu system that automatically updates if you add new sections or categories using in-built TXP tags!
For more information, check out the TextBook tag references for section_list and category_list.
7 Comments - Comments RSS Feed
Martin
# 6 November 2008
Hi Jonathan,
I might be missing something here. You say the menu will update automatically when adding a new section, but doesn’t using the sections attribute limit the menu to only those listed there?
Jonathan Stubbs
# 6 November 2008
Hi Martin. Yes you are correct, perhaps the article does not explain this as well as it should. However, the idea with the sections attribute is to demonstrate how one can determine the order of the menu items.
Leaving out the sections attribute will indeed result in an automatically updated menu. What I was hoping to do was show more than one way to create a menu using in-built Textpattern tags….
Martin
# 8 November 2008
Hi Jonathan, and thanks for the clarification.
I think a sort attribute for txp:section_list, like we have for links, would be a great addition, instead of using the sections attribute.
BTW, your txptips.com is an excellent site with lots of interesting tutorials – thanks for making this effort!
Jonathan Stubbs
# 9 November 2008
Hi Martin, there is already a sort attribute for the section_list tag…maybe you missed it?
Martin
# 9 November 2008
Ah, sorry, my bad. What I meant was a sort value for the actual sections and not the section_list tag.
Susanne
# 12 October 2008
Hi
It would be nice, if you show the menü live here :-)