---
title: Prototyping Navigation with JavaScript
description: I wondered if I could make an easily updateable, prototype site in order
  to test a number of different IA’s using an XML file to represent the sitemap. This
  post is about what I did and how to get some sample code if you want to use or extend
  it for yourself. The XML The  […]
url: https://canonical.com/blog/prototyping-navigation-with-javascript?format=md
---

1. [Blog](https://canonical.com/blog)
2. Article

---

[Anthony Dillon](https://canonical.com/blog/author/ya-bo-ng "More about Anthony Dillon")

24 August 2012

# Prototyping Navigation with JavaScript

[Design](https://canonical.com/blog/tag/design)

---

Share the article

I wondered if I could make an easily updateable, prototype site in order to test a number of different IA’s using an XML file to represent the sitemap. This post is about what I did and how to get some sample code if you want to use or extend it for yourself.

## The XML

The goal is to be able to simply edit, delete or add a section in the XML and refresh the site. There you have it. The navigation menu has changed.

Each <page> child of <sitemap> is top level navigation. You add children to that by placing <page> nodes inside each other.

```
<page title="Contact" url="contact-me">
```

* title – The name of the menu item and the title of the page
* url – The permalink for that page, this is added to the parents name if a child

Below is an example navigation to build a personal website:

```
<sitemap>
   <page title="Work" url="work">
       <page title="Develop" url="develop">
           <page title="Web development" url="web-development"></page>
           <page title="Apps" url="apps"></page>
       </page>
       <page title="Design" url="design">
           <page title="Web design" url="web-design"></page>
           <page title="Magazines" url="magazines"></page>
           <page title="Cartoons" url="cartoons"></page>
       </page>
       <page title="Videos" url="videos">
           <page title="Animation" url="animation"></page>
           <page title="Live footage" url="live-footage"></page>
           <page title="Showreel" url="showreel"></page>
       </page>
   </page>
   <page title="About Me" url="about-me">
       <page title="Life" url="life">
           <page title="Photos" url="photos"></page>
           <page title="Videos" url="videos"></page>
           <page title="Inspiration" url="inspiration"></page>
       </page>
           <page title="Socal" url="social">
           <page title="Friends" url="friends"></page>
           <page title="Family" url="family"></page>
           <page title="Things I've done" url="done"></page>
           <page title="Bucket list" url="bucket-list"></page>
       </page>
   </page>
   <page title="Contact" url="contact-me"></page>
</sitemap>
```

The system has only been developed to navigate three levels deep.

## Adverts

I also wanted to have little ads in the corner of some of the mega menu dropdowns. To do this, there is an promo.xml in the XML folder. Simply wrap a title, img, p and link, if you would like, in the url of the top level link. This will result in an advert style banner on the right side of the menu. You can restyle this banner with CSS.

Here is the example of promo.xml:

```
<adverts>
    <work>
        <title>Latest website</title>
        <img>assets/images/200x150-b8b8b8-fff.jpg</img>
        <link url="#work/develop/web-development">See more</link>
    </work>
    <about-me>
        <title>My picture</title>
        <img>assets/images//200x150-b8b8b8-fff.jpg</img>
        <p>This is a little blarb all about what I do and where I am.</p>
    </about-me>
</adverts>
```

This is a little blarb all about what I do and where I am.

## Hash bang

Using hash bangs, the site does not reload the page when a menu item is clicked. The JavaScript takes the updated hash value and updates the page values to mimic a new page. There are even three different page contents that are changed to reinforce to the user the fact we have changed page.

### Demo

Check out the demo: <http://www.anthonydillon.com/navigation-prototyping>

## The Result

The results were good. We were able to use this code to test three potential IAs and the mega menu itself with ten users. The XML allowed the me to easily tweak the menus between tests and it looked real enough that the users weren’t distracted by the lack of content behind the pages.

## The Code

Feel free to use the code for quick navigation prototyping at: <https://launchpad.net/navigation-prototyping>

If you would like contribute to this project all your help is appreciated!

[Get in touch

Interested in running Ubuntu in your organization?](https://ubuntu.com/about/contact-us/form)

## Sign up for our newsletter

Get the latest Canonical news and updates in your inbox.

Work email:

\*I agree to receive information about Canonical's
products and services.

By submitting this form, I confirm that I have read and agree to [Canonical's Privacy Policy](https://canonical.com/legal/dataprivacy).

Sign up

## Share on

---

## Related posts

[### Challenges designers face in open source (and how to fix them)](https://canonical.com/blog/challenges-designers-face-in-open-source-and-how-to-fix-them)

Open source powers up to 90% of modern software, yet many projects lack usability. Canonical’s Design team surveyed 115 cross-functional professionals to uncover the 4 core...

[Kola Ojoodide](https://canonical.com/blog/author/kola-ojoodide)

26 June 2026

[### Why web engineering is great](https://canonical.com/blog/why-web-engineering-is-great)

Hi, I’m Johann! I’m an engineering manager in Canonical’s web team. For the larger part of my 15 years of work experience as engineer, I’ve been working in web development....

[Johann Wolf](https://canonical.com/blog/author/johannwolf)

27 April 2026

[### Canonical’s recipe for High Performance Computing](https://canonical.com/blog/canonicals-recipe-for-high-performance-computing)

In essence, High Performance Computing (HPC) is quite simple. Speed and scale. In practice, the concept is quite complex and hard to achieve. It is not dissimilar to what...

[Igor Ljubuncic](https://canonical.com/blog/author/igorljubuncic)

24 January 2024

[### Web team – hack week 2023](https://canonical.com/blog/web-team-hack-week-2023)

Today, around 96% of software projects utilize open source in some way. The web team here at Canonical is passionate about Open source. We lead with an open-by-default approach...

[Anthony Dillon](https://canonical.com/blog/author/ya-bo-ng)

25 October 2023