What is a Breadcrumb?

A navigational trail that allows the user to track their location. It usually appears horizontally across the top of a web page and provides links to each previous page the user navigated through to get to the current page.

Breadcrumbs are not always necessary, but shouldn’t be implemented based on the complexity of navigation. The end goal of a breadcrumb is to improve usability and the user experience.

The screenshot below displays how B&H uses breadcrumbs to help users navigate through their hierarchy of product categories.

Types of Breadcrumbs

1. Attribute Based

Attribute based gives users information on how the page they are on is categorized.

2. Path Based

Path based shows the exact trail a user took to get to their current page.

3. Location Based

Location based informs users the page they are on within the hierarchy of the website.

Breadcrumb Resources

7 jQuery Breadcrumbs
Best of Breadcrumbs
Breadcrumbs in Web Design Examples

Ready to discuss your project? Work With Us
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052
  • 102 Madison Ave, 2nd Floor
  • New York, NY 10016
  • 212.260.1978