‹ Back to Blog

Blog /

Blog Feed

 

Breadcrumbs in Web Design

29
Apr
2
Posted by: FHOKE on 29th April 2009 at 2:53 pm

A type of secondary navigation, "breadcrumbs" (or "breadcrumb trails") are a user friendly way of showing where the user is within a site. Breadcrumbs are normally found within sites that have more than 2 levels of navigational links. You'll also see them in applications that have more than one step ("signposting"), for example on a checkout or booking system where a progress bar is needed.

Many Corporate sites use breadcrumbs in a very traditional way using horizontally arranged text links separated by arrows (>) pointing to the right, right angle quotation marks (ยป) and slashes (/). As interface designers we tend to try and push the boundaries creatively and always try something a bit more innovative. But the choice always depends on the aesthetics of the website and the type of breadcrumb the customer might prefer.

As a general rule you should always place the Breadcrumb in the top half of a page, normally below a horizontal primary navigation menu.

We've put together a small collection of breadcrumbs. Some you may be familiar with but please feel free to leave a comment (please bear with us the comments will be fully styled by the end of today) if you think we've missed any that are worth a mention.

Breadcrumb Showcase

Indeo

Bell

CoolSpotters

Guardian

Apple

Delicious

Pixelpoodle

Flickr

Categories: Interface Design

Discussions

Gravatar photo
Posted by: Nathan Pitman on 29th April 2009 at 3:20 pm
Those last two aren't actually real breadcrumbs, 'Pixel Poodle' is a navigational bar that's rather confused about it's identity and from 'Flickr' a progress indicator...

Nice collection though, thanks for sharing. :)
Gravatar photo
Posted by: FHOKE on 29th April 2009 at 3:32 pm
Thanks Nathan, yep your right there.

We thought Flickr was a good example to show "signposting" and although Pixelpoodle is rather confusing it's a nice design idea... one for the future.

Post A Comment

Submit