What a rich navigation menu you've put on your website! Great, but I might have a few problems with it.

  1. As a vertical menu down the side of the page, it's taking up precious horizontal space.

  2. You have done it as a horizontal bar, then prevented it from wrapping, and so it doesn't fit in my window.

  3. I've turned stylesheets, Javascript and images off – what do I see? Because of the way you have achieved its position, and because it is extensive, the first thing in the page is a complete site map. The actual content that is specific to this page within the site is two screenfuls down! Everytime I go to another page, I'm confronted with the same text. What if the actual content is smaller than the site map? What is a search-engine robot going to make of it?

  4. I've printed your page out, but so much space is taken up by the now useless navigation links.

My first piece of advice on navigation is to keep it quite small (4 or 5 items), particularly if it appears before the main content when no styling is being applied. Ensure that at least one item links to a separate site map, an index or a contents page. That might be all you need to allow your visitors to get around.

If your navigation section must be big, place it at the end of the page in HTML, and use CSS (plus media queries, deferred content or template layout, if supported) to move it to a more aesthetic position. Then, if CSS isn't available, that will stop it getting in the way of the main content.

Use the basic media-query capability of HTML4 or CSS2 to disable navigation when the page is printed, e.g.:

@media print {
  #navigation {
    display: none;
  }
}

You could also add lots of meta-data. This has the beauty of being completely ignored if not supported, i.e., there is no extra content that somehow becomes dysfunctional in a simple environment. Correspondingly, though, you should still provide at least a simple way of navigating so as not to strand visitors whose software doesn't recognise the meta-data.

Meta-data can be embedded in each page using <link> elements, which can express a menu with a limited structure. It is also officially advocated in the HTML standards.

There are also some proprietary and independent attempts at providing richer meta-data navigation, such as Navibar and A9 SiteInfo. Both of these involve writing an XML document containing a hierarchical site map, and getting the browser to locate this map and present it to the user in such a way that it doesn't intrude on the main content.

I would say that Navibar has the edge over A9 SiteInfo, for these reasons:

On the other hand, but of less importance:

Unfortunately, Navibar seems to have disappeared up its own fundament, as has A9 SiteInfo (as it should). Happily, the Standard-Sitemap Protocol has taken up the challenge.