Tag Primer (Part 2)

Posted by John W. Long on Thursday, June 15, 2006 | |

In the last article in this series, we discussed most of the basic tags needed for working page content. Today, I'd like to cover a few tags that relate to page navigation.

Page Navigation

Web sites often include some sort of context sensitive navigation to help users get around. This is accomplished by showing a link as bold, showing a tab as selected, or doing something to indicate to the user where they are in the site. Radiant provides a set of tags to help you with this. Consider the following example from the Ruby-Lang redesign:


<r:navigation urls="Downloads: /en/downloads/; Documentation: /en/documentation/;
  Libraries: /en/libraries/; Community: /en/community/; News: /en/news/; About Ruby: /en/about/">
  <r:normal><a href="<r:url />"><r:title /></a></r:normal>
  <r:here><strong><r:title /></strong></r:here>
  <r:selected><strong><a href="<r:url />"><r:title /></a></strong></r:selected>
  <r:between><span class="separator"> | </span></r:between>
</r:navigation>
If you are on the /en/news/ page, this code will output the following:

<a href="/en/downloads/">Downloads</a>
<span class="separator"> | </span>
<a href="/en/documentation/">Documentation</a>
<span class="separator"> | </span>
<a href="/en/libraries/">Libraries</a>
<span class="separator"> | </span>
<a href="/en/community/">Community</a>
<span class="separator"> | </span>
<strong>News</strong>
<span class="separator"> | </span>
<a href="/en/about/">About Ruby</a>

In the code above, the navigation tags cause a list of links to be generated with “News” in bold. The list of links and their captions is specified in the semicolon separated pairs in the url attribute of the navigation tag.

The navigation tags allow links to be displayed in one of three states:

Here
The here tag should contain a snippet which will be rendered when you are on the specific URL. In the example above, this is what caused “News” to be rendered bold.
Selected
The selected tag should contain a snippet which will be rendered when you are on a child page of the specific URL. In the example above, this causes “News” to be rendered as a bold link when you are on a news article.
Normal
The normal tag should contain a snippet which will be rendered when a link is not in the “here” or “selected” states. In the example above, it renders a plain link.

The between tag specifies the code that should be rendered after every link except the last one. In this case, the between tag renders a separator between each of the links.

Breadcrumbs

In the story of Hansel and Gretel, the children keep track of their path through the forest by dropping a trail of breadcrumbs behind them as they journey. Unfortunately, the animals in the forest eat the breadcrumbs and the children become hopelessly lost.

In tribute to this fine tale by the Brothers Grimm, a trail of navigation links on a Web page has come to be known as breadcrumbs. Breadcrumbs are a simple navigational aid to help users understand where they are on a site. On a complex site, this can be quite useful.

On this site, the trail of breacrumbs to this page looks like this:

Home > Weblog > Weblog Archives > Tag Primer (Part 2)

In Radiant, you can generate breadcrumbs using the breadcrumbs tag:


<r:breadcrumbs between=" &rarr; " />

You can use the between attribute to specify the code that should be placed between each of the links. By default the between attribute is set to &gt; .

In our next article in this series, we will talk a little about content part inheritance. For more information about tags, see the first article and examine page_context.rb