Breadcrumbs in Web Design
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
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.
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.