Category Archives: Breadcrumbs

Breadcrumbs in web design: a great showcase of breadcrumbs navigation, breadcrumbs via css or realized in drupal, css, worpress at Web & Patterns, collecting inspirational solutions for very inspired web designers.

A scrolling background working as breadcrumb trail


We’ve already showcased a few examples of one-page website design but what makes this one memorable is the little rectangular hole “cut” in the upper left corner, exposing the scrolling background and working as breadcrumb trail:
when you click on the menu, the page scrolls vertically and when it stops, the title section can be seen through this tiny window .

Fake breadcrumbs in Hootsuite Blog

hootsuite-blog-breadcrumbs-menu

Could you tell the difference between the breadcrumbs and the navigation? When both are displayed it’s quite obvious, but in other pages (look at here) it’s not.

Though it might turn out to be a nice graphic expedient, I think it could be risky to disguise one user interface pattern (navigation menu) as another. (breadcrumbs menu). Don’t you agree?

Yahoo Developer Network breadcrumb navigation

yahoo-inspiring-breadcrumbs-design-pattern

When it comes to user interface patterns (or in short, design patterns) Yahoo Design Pattern Library is certainly a reference.

But it’s a good example of applied web desing patterns too: the page in fact displays a breadcrumb trail which is a  nice variation of the classic slash-kind, with the wow factor added by using a graphic element instead of an ASCI character.

Inspirational price plan table from Wufoo

wufoo-inspirational-priceplan-table

Wofoo is an HTML form builder. To put it better:

a web application that removed the inefficiency and tediousness out of the form building process. Wufoo reduced what used to take days (if not weeks) by trained professionals into something that could be done by anyone in minutes.

I really like Wufoo’s brilliant pricing and signup table that I find inspirational from many points of view. Where do I start?

I loved the cartoon-ish hint conveyed by the typeface, the latin expression that entitles each pricing offer, the nice, little breadcrumbs on the top left corner, the overall friendly, not-conventional yet professional suggestion that this well designed page implies.

Stuff’s menu and breadcrumbs

Stuff's navigation menu

When you combine two differents web design patterns you can get either a mess or a really interesting new element: in this case, Stuff‘s menu gets a compact and solid appearence, having shifted the properties pertaining to breadcrumbs trail to the horizontal menu.

As you can see, home page’s rainbowy menu (at the top of the screenshot) introduces the color code that constitutes the basics of this website’s information architecture. When you’re in a main section (at the bottom of the screenshot), the menu splits up into two rows: the first one works as breadcrumbs/page title, the second one displays a list of available subsections.

For those who don’t already know it, Stuff is

New Zealand’s award winning news and information website, bringing together the vast resources of Fairfax New Zealand Ltd several hundred journalists and photographers around the country to provide a single online ‘publication’.

Which briefly means: a fresh news portal that provides informations in a kick-ass package.

Bell breadcrumbs

Bell web site breadcrumbs

I’ve found this interesting example of iconic breadcrumbs on Web designer Depot, reading an interview with Web Usability guru Jacob Nielsen.
Nielsen, asked about breadcrumbs effectiveness in easing user navigation, answers:
“So breadcrumbs are definitely useful. Just as important, they don’t harm those users who don’t use them. Some studies have found that many users don’t use breadcrumbs.
But that’s OK, because the breadcrumbs don’t cause any trouble for these users, and since they’re a very lightweight design element, breadcrumbs are worth including for the substantial good they offer to those users who do use them.
The full interview is available here.

I’ve found this beautiful example of iconic breadcrumbs on Web Designer Depot, reading an interview with Web Usability Guru Jacob Nielsen.

Nielsen, asked about breadcrumbs effectiveness in easing users navigation, says:

“So breadcrumbs are definitely useful. Just as important, they don’t harm those users who don’t use them. Some studies have found that many users don’t use breadcrumbs.

But that’s OK, because the breadcrumbs don’t cause any trouble for these users, and since they’re a very lightweight design element, breadcrumbs are worth including for the substantial good they offer to those users who do use them.”

The full interview is available here.

Yahoo TV breadcrumbs

I breadcrumbs nella sezione TV del portale Yahoo

Mixing different user interface patterns very often leads to innovative solutions and more than once Yahoo played a lead role in changing web users behaviours: in this case, the breadcrumb trail of Yahoo TV allows the user to change section clicking on a drop-down menu (beside Tv Home) without having to return to the home page.

The use of blue highlights the link between the actual section and the corresponding menu below.

Glaswgow collective

I breadcrumbs di The Glasgow Collective, una raccolte di opere di studenti della Glasgow School of Art

The Glasgow Collective is a gallery that contains works by students of Glasgow School of Art 

The web site is well done and the breadcrumbs are well set: the claim “you are here” immediately attracts the eye and the shape of arrows is pleasant. 
On the other hand, I don’t find proper using the same shape both as a symbol in the breadcrumbs trail and as a button in the tab navigation of the artist page.

Delicious path

delicious2

Delicious designers have created a strange hybrid of breadcrumbs and form:  user can see  sites associated with a tag, write the name in a text input queued to the breadcrumbs path. 

After sending data, the input text is transformed into a path link, in a process that virtually could keep go on going until the last nesting level.

Apple path

apple-path

Apple breadcrumbs trail is not used consistently within the website and , among other things, there are two slightly different version of it: 

  1. in the online store is located at the top and the path first link is a house shaped icon that leads to subdomain store.apple.com; 
  2. in the “real” website is placed at the bottom of the page, just before the footer;  the icon used is the famous apple logo icon, which links back to main domain (www.apple.com) home page.

    Guardian online

    guardian

    The Guardian online offers an interesting example of  breadcrumb navigation used not only for the purpose of showing the current website section, but also its possible subsections (Politics, Business, Health are indeed subsections News). 

    Vivid colors are applied to graphic elements and titles of each section, in contrast to the majority of online newspapers that tend to use a few colors, strict grids and absolute minimalism.