Our Blog
The Tabbed Breadcrumb Navigation
Typically when a site is architected with a structure that is both deep and wide, we look to elements like secondary and tertiary navigation and/or traditional breadcrumbs to help a user navigate. They’ve been around a long time and are now considered “best practices” by convention. 
Is a traditional 3+ layered navigation system really the “best” way to design a site whose structure has breadth and depth? We’re not so sure. One of the drawbacks of these methods is the fact that they can require quite a bit of visual overhead. We commonly see them take the form of sidebars with expanding and collapsing navigation. This not only eliminates space for page level content but the number of simultaneous navigation links they present can often make it visually and mentally overwhelming to decipher (see for yourself in the Rogers example).
Recently, we came across a new navigational system on some Yahoo properties like Food and TV then later on Marketwatch. The homepage navigation looks pretty standard. It’s when you dive deeper into the site that things begin to change. The navigation becomes focussed on whatever section you’re in and all of the parent sections become part of an integrated breadcrumb. The first level of navigation is held within a dropdown on the home tab. For conversation sake we’re calling this tabbed breadcrumbs.
We were immediatly intrigued by how natural this navigation system felt. It just seemed to get out of the way and provide a high level of focus on the section we were in. No matter how deep we dove, we never felt lost nor abstracted from the top-most navigation tier.
While we don’t think this type of navigation is right for every site, it is worth a look for those that need to go deep. A huge factor at this point that we honestly haven’t spent much time thinking about is how usable it is to the masses – will others find it as natural? Do you? The screenshots here don’t really do it justice – you really need to experience it first hand.
The tabbed breadcrumb implementation on Yahoo Food is elegant on its own, but that “Buzz” line of recent search terms immediately below it is fatally confusing. The Buzz looks like nav and acts like nav, but it isn’t nav. It distracts the user from what could have been a nice clean site navigation scheme.
Are there any other tabbed breadcrumb implementations you can point us to?
(By the way, that Captcha validation plugin really blows. This was my eighth attempt to submit this post.)
Not sure who had it first, but Yahoo! Sports’s recent redesign introduced a similar tabbed breadcrumb navigation bar. I’ve found it to be quite elegant.
Yahoo Sports is using it as well:
http://sports.yahoo.com/
@ David
Agreed. The “Buzz” line the Yahoo! sites use really confuse things – which is why we didn’t show on our example. Sorry about the Captcha frustration, when we get a moment we’ll source a better solution. Thanks for the feedback.
@Grant + John
I hadn’t seen that before – it just works so beautifully when the site is wide and deep.
We’ve been working on trying to sell this idea through on a current project. It has been challenging. There is certainly risk in trying new things, especially with navigation.
Additionally, the more we work with this system the more we love it. I think we’ll write a part 2 on this that gets at some of things we’ve discovered. more later…
Apple uses something similar at the iTunes Store.
I work for Rogers and I have always considered our website to be too cluttered and busy. Happy to see someone else agrees.
We are in the process of implementing this idea on our web application, but we are wondering if there’s any value to have drop-downs not only on the home section, but also on any breadcrumb tabs too? This would allow the user to any branch directly off the route they have already taken without moving back to home and back down.
Any thoughts? Does this add value, or destroy the simplicity of the model?
@ Tim
I don’t think it’s necessary. Do your users need to jump directly into a different parent’s child? If the answer is often yes, then the solution may be re-architecting, or providing in page mechanisms to access whatever content or utility they are trying to get quick access to.
The architecture of the site needs to support a system like this, so it needs to be architected with this system in mind. We’ve gone down this road on a few projects over the past few months only to realize a slightly more traditional system was more efficient.
I am currently working on a site that would benefit from this style of navigation. Does anyone have any resources for coding this?
I am intrigued by this navigation!
Is anyone aware of where I can download/purchase code to automatically generate this type of breadcrumb navigation?
Hi Geoff!
Sorry for bumping an old post but i found this very intriguing. Did you ever use this for a project? What were your conclutions concerning the logic of this?
THanks!
We have used this for a few designs although only one client has bought into it… it is currently being built.
[...] Original post here. [...]
best navigation, ever. no argument is possible. those crazy aussies have it nailed, tabbed and breadcrumbed:
http://www.news.com.au/
[...] vient du Lab de teehan+lax (les responsables du kit graphique de la GUI de [...]
Having had to implement this navigation on another site, I can offer two caveats: first, it’s extremely complex getting it to work, especially if you want to customize; and second, plan carefully for scalability. I ended up with a messy PHP file dynamically generating JavaScript to accommodate an ever-growing site. I liked the results, but it didn’t change my opinion on horizontal nav bars.
Incidentally, did anyone try any of those sites with JS turned off? Not very impressive.
We just recently published a quite unusual example (at least we do think so) of a tabbed breadcrumb for German chocolate brand (family business) RITTER SPORT. Check it out at:
http://www.ritter-sport.de
Feedback is welcome!
All the best from Germany,
Roman
wow, very beautiful.
I want to make a navigation like this.
very cool, how could you do this?
do you mink share you code? I really need it
[...] Навигация в виде табов с использованием “хлебных крошек” http://www.marketwatch.com/markets/. Подробнее можно почитать здесь The Tabbed Breadcrumb Navigation [...]
This in a way is an offshoot: http://www.guardian.co.uk/money
Great idea, can you please make the PSD available?
I was actually lost after entering the 2nd level in Yahoo. Main reason was because below Recipes, I saw Buzz: Items and not a deeper menu. This made me not only hesitant to select a link, I was so confused thinking of where should I click next in all the content available.
Your illustration made more sense to me. :)
It might be good if, on interior pages, “Home” changes to “Contents” and the home link is included in the drop down. A user might understand that a drop down list would include the contents this way and not be confused if the navigation changes from page-to-page (which remains a basic no-no for web usability).
Yay! That’s a nice navigation!
But… another thing… How did you make the first image with the bar in perspective? Is it photography or magic in PS?
Thx!
/H
@Henriko that is a style we use in a lot of our promotional materials including blog posts. It is a photograph of the monitor with your camera set to “macro” mode. Angle the monitor and take the picture to get the perspective.
[...] The Tabbed Breadcrumb NavigationA comprehensive tutorial on creating breadcrumb navigation formatted as tabs. [...]
[...] The Tabbed Breadcrumb NavigationA comprehensive tutorial on creating breadcrumb navigation formatted as tabs. [...]
[...] The Tabbed Breadcrumb NavigationA comprehensive tutorial on creating breadcrumb navigation formatted as tabs. [...]
[...] The Tabbed Breadcrumb NavigationA comprehensive tutorial on creating breadcrumb navigation formatted as tabs. [...]
[...] The Tabbed Breadcrumb NavigationA comprehensive tutorial on creating breadcrumb navigation formatted as tabs. [...]
[...] The Tabbed Breadcrumb NavigationA comprehensive tutorial on creating breadcrumb navigation formatted as tabs. [...]
Any studies on how users respond to this navigation style? *wink *wink @ yahoo?
great article but needed a tutorial.
great article combine this with the old fashion ‘Suckerfish navigation’ and you got the best breadcrumb around!!
Wow! This actually is the first time I see this type of navigation. Pretty cool!
[...] The Tabbed Breadcrumb NavigationA comprehensive tutorial on creating breadcrumb navigation formatted as tabs. [...]
[...] The Tabbed Breadcrumb NavigationA comprehensive tutorial on creating breadcrumb navigation formatted as tabs. [...]
[...] The Tabbed Breadcrumb Navigation A comprehensive tutorial on creating breadcrumb navigation formatted as tabs. [...]
[...] The Tabbed Breadcrumb Navigation 一份关于创建面包屑导航，并格式化为标签式的全面教程。 [...]
[...] The Tabbed Breadcrumb Navigation 一份关于创建面包屑导航，并格式化为标签式的全面教程。 [...]
[...] The Tabbed Breadcrumb Navigation A comprehensive tutorial on creating breadcrumb navigation formatted as tabs. [...]
YooTheme implements something similar for Joomla:
http://demo.yootheme.com/index.php?show=jul09/index.php?yt_color=combsblue
Also check out http://www.mashable.com for a similar take on the concept
http://www.twitter.com/aainslie
It seems like this UI concept was really flawed. A lot of the sites have taken this model of navigation down, including Marketwatch and Yahoo.
The main problem is the navigation is not consistent, is forever changing – confusing to most people. Breadcrumbs are good to show depth, but not as main form of navigation. People expect consistency of the navigation screen to screen.
We took a look at this breadcrumb navigation and came up with a twist on it. Check it out at:
http://www.microsoft.com/services
It was a perfect fit for a site that has an incredibly deep hierarchy and long menu titles. It also has animation, but this feature is disabled until the server starts running AJAX.
[...] The Tabbed Breadcrumb Navigation [...]
Thanks!!! Nice post!
[...] pointed a blog post out to me by Geoff Teehan, which in turn points to the Yahoo! Food site. The navigation here is a combination of tabs and [...]
I believe it´s nice but quite complicated too. After clicking 2 times, I can get lost waht I was looking for. like the example of http://www.guardian.co.uk/money but it`s not connected entirely from the main menu.