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.

comments powered by Disqus