How not to Tab - a navigation story

Tabs are widely use as main navigation device in web applications, when used right you can achieve a high level of usability. Unfortunately the tabs are used, mostly, to navigate different areas of our application.

But tabs are intended to display views from information in the same context. More information on this can be found on Bla, Bla, Bla and finally a good Bla.

Alternatives

If you want to skip tabs as your main navigation device, you realize that there is not much more to use. Let´s see some happy examples out there:

• Apple drop their old tabs navigation for a brand new Buttonbar that works just great.
• Amazo is dropping their classical tabs for a vertical Menubar placed on the left side of the layout.
• Flickr in the other hand, made an amazing remix of the old-known Menubar with a refreshing style.
• Adobe is a great example of good a navigation device on their homepage.

My 2 cents

I have been using a special navigation bar (don´t remember when I see it first time, but looks very elegant) and most of all, is easy to use and understand for the main user. I have no good name for it (was tempted to write “no-tabs”) but I think is other navigation bar, but with a different design.

The navbar have a background, the links (of course) and the selected option: which have a pointer indicating that the content bellow is related. At a glance the users can easily notice where they are in the main hierarchy of the site.

Finally

Due the intended public of this site, this article not pretend to be a tutorial, but I think is useful to see this navigation device living happily on XHTML/CSS.

So, see the live sample, and download the source code if you feel like so.

Keep flowing.