When a site has considerable breadth and depth of content, finding an easy way to navigate through it becomes increasingly challenging. The familiar and mostly very effective metaphor for top level navigation is tabs with second level submenus located in a secondary bar (e.g. Amazon, Apple etc). When a third level is required, we often see another menu appearing in the typical left or right hand column next to the content. Then to help clarify where you are within the site, the breadcrumb menu is deployed.
A different way was brought to our attention by the bright folk at Teehanlax who blogged about a new concept which they christened the ‘Tabbed Breadcrumb’ menu. As it’s name suggests it combines the tabs and the breadcrumbs and multiple levels of navigation in to a rather elegant and satisfying solution.
We decided to try it out on SailingNetworks.com:
Below are a series of screenshots showing the top, second and third levels of navigation using the old and new styles.
Top level (new)
Top level (old)
Second level (new)
Second level (old)
Third level (new)
Third level (old)
And we like it. So we’re also making it an integral part of the admin interface for all our web apps….