SfC Home > Web Design > Navigation >
Breadcrumbs Navigation Aid
by Ron Kurtus (updated 21 December 2022)
If you have a structured or hierarchically arranged website, breadcrumbs can be an effective navigation aid in showing user 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:
- What is the purpose of breadcrumbs?
- What do they look like?
- Who uses breadcrumbs?
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
However, I wonder if this is superfluous and really not value-added. So, I have been considering removing those items.Web Design topics
Breadcrumbs
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:
- Amazon.com
- How Stuff Works
- Ford Motor Company
- Adobe
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.
< Previous || Next >
Think of the user
Resources and references
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
Books
(Notice: The School for Champions may earn commissions from book purchases)
Top-rated books on Website Design
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.
Where are you now?
Breadcrumbs Are Navigation Aid