List of Topics

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:

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


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


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 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.

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 uses a minimal breadcrumb: Home > Products for no matter what product you are on

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:


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

Ron Kurtus' Credentials


Breadcrumb Navigation Increasingly Useful - From, usability site

Breadcrumbs In Web Design: Examples And Best Practices - From

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


(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:

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




Content with HTML

Format with CSS



Responsive websites


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.