List of Topics

SfC Home > Web Design > Usability >

 

Breadcrumbs Are Navigation Aid

by Ron Kurtus (revised 10 April 2013)

You want users of your website to be able to easily find their way around the site to examine other pages. If you have a structured or hierarchically arranged website, "breadcrumbs" can be an effective aid in showing them where they are in your site.

Breadcrumbs consist of a trail of links from your home page to the present page. The name was taken from the story of Hansel and Gretel, where they followed a trail of breadcrumbs to the gingerbread house.

The breadcrumb trail is typically placed near the top of the page in a horizontal list. Some websites use a vertical list. Although people seldom actually use breadcrumbs to navigate in a site, they do show the user where he or she is and often encourage the person to investigate other pages in your site.

Questions you may have include:

This lesson will answer those questions.



Purpose of using breadcrumbs

One purpose of the breadcrumb is that it provides information to users where they are located within a hierarchically arranged website. It allows them to easily visualize their position in the site and gives them awareness of the structure of the site.

Another purpose is that it offers shortcut links to jump to more general web pages. Breadcrumbs give location information in a backward direction, while other navigation methods, such as navigation bars move the user forward or in a parallel direction within the site.

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.

Breadcrumbs are typcially placed near the top of the page in a horizontal list. A few sites use vertical breadcrumbs.

Note: I have breadcrumbs both at the top of the pages and another list at the bottom in the form of:

Where are you now?

School for Champions

Web Design topics

Breadcrumbs

However, I wonder if this is superfluous and really not value-added. So, I have been considering removing those items.

Benefits

Benefits to the owner of the website for having breadcrumbs include better user satisfaction and perceived usability of the site at a very small investment in time or space.

Breadcrumbs can also be good for search engine optimization (SEO), because they provide solid links to other normally related parts of the website. Sometimes website navigation is done using JavaScript or Flash, which is not effective for SEO. Thus, breadcrumb links would be beneficial for SEO.

Note that using to display your breadcrumbs will negate the SEO advantage.

Types of breadcrumbs

The three main types of breadcrumbs are location-based, attribute-based, and path-based breadcrumbs.

Location-based

Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels). In the example below (from SitePoint), each text link is for a page that is one level higher than the one on its right.

This website consists of files in the root folder and files in subfolders. In a few situations, there are files in sub-subfolders.

At the top of this page is an example of a two-level breadcrumbs: SfC Home > Web Design >. The URL's consist of /default.htm > /web.htm.

Attribute-based

Attribute-based breadcrumb trails display the attributes of a particular page. For example, in Newegg, breadcrumb trails show the attributes of the items displayed on a particular page:

This page displays all computer cases that have the attributes of being manufactured by Lian Li and having a MicroATX Mini Tower form factor.

Path-based

Path-based breadcrumb trails show users the steps they’ve taken to arrive at a particular page. Path-based breadcrumbs are dynamic in that they display the pages the user has visited before arriving on the current page.

Examples of website breadcrumbs

About 45% of major e-commerce websites use breadcrumbs, while others use their menus to tell you where you are. Of those with breadcrumbs, about 95% used horizontal breadcrumbs and 5% used vertical.

Using breadcrumbs

Companies using breadcrumbs and examples of what they look like include:

Dell computers

You are here:  USA > Home & Home Office > Desktop Computers

Cafe Press

Home > Marketplace > Product Selection > New T-Shirt

Microsoft

Microsoft uses a minimal breadcrumb: Home > Products for no matter what product you are on

About.com

Uses tabs

You are here: About > Health > Arthritis

We also use breadcrumbs on this site, as can seen near the top of the page.

Don't use breadcrumbs

e-Commerce sites or companies not using breadcrumbs include:

Summary

Breadcrumbs can be an effective aid in showing users where they are in your site. The breadcrumb trail is typically placed near the top of the page in a horizontal list. Although people seldom actually use breadcrumbs to navigate in a site, they increase user satisfaction. Breadcrumbs are also useful to enhance search engine optimization.


Think of the user


Resources and references

Ron Kurtus' Credentials

Websites

Breadcrumb Navigation Increasingly Useful - From UseIt.com, usability site

Breadcrumbs In Web Design: Examples And Best Practices - From SmashingMagazine.com

Breadcrumb Navigation - From Web Design Practices

Breadcrumb Navigation - From Wikipedia

Breadcrumb Navigation:  Further Investigation of Usage - From Univ of Wichita Usability News

Web Design Resources

Books

Top-rated books on Website Design


Questions and comments

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. I will try to get back to you as soon as possible.


Share

Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:

 

Students and researchers

The Web address of this page is:
www.school-for-champions.com/web/
breadcrumbs.htm

Please include it as a link on your website or as a reference in your report, document, or thesis.

Copyright © Restrictions


Where are you now?

School for Champions

Web Design topics

Breadcrumbs Are Navigation Aid




Web Design topics

Goals

Purpose

Preliminaries

Content with HTML

Format with CSS

Navigation

Usability

Responsive websites

Visibility

Also see



Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.





Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!





The School for Champions helps you become the type of person who can be called a Champion.