Back to 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. rogers.jpg

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.

Geoff Teehan More posts by Geoff Teehan