I was on Kickstarter.com the other day and I really liked the navigation bar they had for setting up a project.

I wanted to build a navigation bar very similar for a project at work but I didn't want to put in the work to build something that could only be used once. I decided to build it into a dynamic jQuery plugin that would allow you to specify the tabs simply by supplying the plugin with a small array at startup. Below is an example of the plugin. It is being used in conjunction with the jquery.history plugin. The tab wizard simply changes the hash tag in the URL and then in the hash handler I call the tab wizard's setSelected method to change which tab is selected, and then I display the appropriate DIV for the hash. This is done in the hash handler because ideally you should be able to navigate straight to the page with the hash included and have the appropriate tab selected. For example, http://fiddle.jshell.net/Chevex/MSYVD/show/light/#Products would take you to the same page you see below except the products tab is already selected.

You can find the source up on Github.