An XML Approach to Creating a Navigation Bar

I'm always interested in seeing things done differently than I would approach them. Not only do I learn from the experience, but often I find a simpler way of doing things.

For instance, on a recent project, some other Interknowlogy developers and I created a navigation bar using XML and Extensible Style Language (XSL). Let's look at some of the elements we used to implement this design and some of the advantages of this approach.

First, we created an XML page named navigation.xml that contained all the data for the navigation bar. For each link or button that we wanted the navigation bar to include, we created a category within the navigation tree. We then assigned each category a display name and a link that defines the path, as the following code shows:

To interpret the data, we created a corresponding XSL page named nav.xsl. This page uses the statement to loop through the navigation.xml page and build a link on the navigation bar for each category:

The statement tells the system that for each category listed under navigation, it should perform the steps that follow. In the example above, we've said, "Create a new row for each category, and in that row create an anchor that uses the name and link from the category in the XML page to populate the name and href of the anchor." Creating and formatting the layout for one navigation bar row and having the XSL page loop through the categories on the XML page saves time and makes any changes easier because you need to make them only once.

If you prefer to display each row of the navigation bar in a different color, you simply add another attribute to the category in the navigation.xml page:

Then apply the attribute in the nav.xsl page:

The possibilities are endless. You can define anything you want associated with the navigation bar in the XML page and then you do the formatting only once on the XSL page.

Our XML/XSL navigation bars offer two advantages. First, they let us separate the data from the layout. With this separation, the pages are easier to design and modify. The second advantage stems from the use of the statement in nav.xsl. Creating the HTML for the navigation bar once and then having the code loop through for each navigation category eliminates a lot of redundant HTML code.

Try this approach the next time you build a navigation bar. It's a great way to familiarize yourself with this new technology, and—with a little practice—you could save yourself a lot of time.