Breadcrumbs Navigation Aid
by Ron Kurtus (revised 25 August 2017)
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 ChampionsHowever, I wonder if this is superfluous and really not value-added. So, I have been considering removing those items.
Web Design topics
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.
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 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 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 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.
Companies using breadcrumbs and examples of what they look like include:
You are here: USA > Home & Home Office > Desktop Computers
Home > Marketplace > Product Selection > New T-Shirt
Microsoft uses a minimal breadcrumb: Home > Products for no matter what product you are on
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:
- How Stuff Works
- Ford Motor Company
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
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
(Notice: The School for Champions may earn commissions from book purchases)
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 this page
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:
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