Breadcrumbs In Web Design: Examples And Best Practices

Advertisement

On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability1 of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website’s hierarchy, making it a great source of contextual information for landing pages.

What is a breadcrumb?

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel2 fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

interactive example 1.763
Breadcrumbs on Delicious.com4

You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. You also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

In this article, we’ll explore the use of breadcrumbs on websites and discuss some best practices for applying breadcrumb trails to your own website.

When Should You Use Breadcrumbs?

Use breadcrumb navigation for large websites and websites that have hierarchically arranged pages. An excellent scenario is e-commerce websites, in which a large variety of products is grouped into logical categories.

You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map5 or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.

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.

Types of Breadcrumbs

There are three main types of breadcrumbs6.

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 SitePoint7), each text link is for a page that is one level higher than the one on its right.

Example of location-based breadcrumb.

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

Example of attribute-based breadcrumbs.

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.

Benefits of Using Breadcrumbs

Here are just some of the benefits of using a breadcrumb trail.

Convenient for users
Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

Reduces clicks or actions to return to higher-level pages
Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.

Doesn’t usually hog screen space
Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

Reduces bounce rates
Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests. This, in turn, reduces the overall website bounce rate9.

Mistakes in Breadcrumb Trail Implementation

Using breadcrumb trails is a fairly straightforward affair, and there are only a few guidelines to consider before deciding to implement them on a website. Let’s take a look at some common mistakes to avoid.

Using breadcrumbs when you don’t need to
A common mistake in implementing breadcrumbs is using them when there is no benefit.

Using breadcrumbs when you do not need it.

In the above example, Slicethepie10 risks overwhelming users with too many navigation options. The (1) primary navigation, (2) breadcrumb trail and (3) secondary navigation are very close together. The breadcrumb trail in this application offers users no added convenience because the secondary navigation for lower-level pages sits right below it. Additionally, clicking on the second-level link in the breadcrumb trail (“Music”) takes you back to the first tab (“Listen”), which mistakenly suggests that the first tab is on a higher level than the other two (“Search” and “Artist hall of fame”).

Using breadcrumb trails as primary navigation
As stated earlier, use breadcrumbs as an optional aid to navigation.

Using breadcrumbs as primary navigation./

In the above example, mefeedia11 does not offer a primary navigation menu for viewing videos. Though there is text link navigation in the footer section, there’s no navigation menu in the body of the pages, making it hard to navigate to other sections of the website.

Using breadcrumbs trails as primary navigation - example 2.

If you arrive on a video page directly — say, for example, through a Google search result — the only navigation option you may have is the breadcrumb trail. Or if you’ve already been browsing a website’s pages and reach a page that does not display the primary navigation menu, you will have to hit the “Back” button in your browser to access the main menu.

Using breadcrumbs when pages have multiple categories
Breadcrumb trails have a linear structure, so using them will be difficult if your pages can’t be classified into neat categories. Deciding whether to use breadcrumbs largely depends on how you’ve designed your website hierarchy. When a lower-level page is (or can be put) in more than one parent category, breadcrumb trails are ineffective, inaccurate and confusing to the user.

When designing a breadcrumb navigation scheme, keep several things in mind. Let’s take a look at some questions that might arise when you’re working with breadcrumbs.

What should be used to separate link items?
The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.

Example of greater than symbols separating the text links.12

Other symbols used are arrows pointing to the right, right angle quotation marks (») and slashes (/).

Example of alternative hierarchy separators.13

The choice depends on the aesthetics of the website and the type of breadcrumb used. For example, for path-based breadcrumbs in which the links do not necessarily have a hierarchical relationship to each other, using a “greater than” symbol may not convey their relationship accurately.

How big should it be?
You don’t want your breadcrumbs to dominate the page. A breadcrumb trail functions merely as an aid to users (a convenience); its size should convey this to users and thus should at least be smaller, or less prominent, than the primary navigation menu.

An example of a good-sized breadcrumb trail.

A good rule of thumb to follow when sizing your breadcrumb trail is that it shouldn’t be the first item that grabs the user’s attention when arriving on a page.

Where should breadcrumbs be located?
Breadcrumb trails are usually displayed in the top half of the page, below the primary navigation menu if a horizontal menu layout is used.

Now that we’ve discussed the who, what, when, where, why and hows of breadcrumb trails, we should take a look at some live examples. In the following section, you’ll find a few examples of great websites that use breadcrumb trails.

1. Classic Text-Based Breadcrumbs

TypePad Design Assistant14

classic breadcrumb - example 1.15

NASA16

Classic text-based breadcrumbs17

Nestle18 uses a breadcrumb trail whose text is significantly smaller than the text on the rest of the page, effectively making it unobtrusive.

Nestle example.19

Marchand de Trucs20

classic breadcrumb - example 2.21

Bridge 5522

classic breadcrumb - example 3.23

Overstock.com24 uses the standard “greater than” symbol for its attribute-based breadcrumb trail. Checkboxes for product attributes are used so that users can uncheck them to filter them out.

classic breadcrumb - example 4.25

2. Replacing “>” with Other Symbols

TechRadar UK26 and BP27 use right-pointing triangles.

Using other symbols for hierachy separators - example 2.28

Replacing the greater than symbol example.29

PSDTUTS30 and Martique31 use slashes.

Using other symbols for hierachy separators - example 3.32

Using other symbols for hierachy separators - example 4.33

Mouse to Minx34 uses a right-angled quotation mark to denote page hierarchy.

Using other symbols for hierachy separators - example 5.35

Jakob Nielsen’s Alertbox36 uses right-pointing arrows.

Using other symbols for hierachy separators - example 1.37

Target38 uses semi-colons (:) for separators.

semicolon separator example.39

One current trend in breadcrumb design basically says, “Breadcrumbs don’t have to be simple”. In these designs, you’ll see beautifully styled breadcrumbs that integrate well with the overall design.

Grooveshark40

styled breadcrumbs - example 1.41

Yahoo! TV42

Beautiful breadcrumb trails.43

IDEO44

styled breadcrumbs - example 2.45

Apple Store46

styled breadcrumbs - example 3.47

Coolspotters48

styled breadcrumbs - example 4.49

Devlounge50

styled breadcrumbs - example 5.51

LottaNZB52

53

Pixelpoodle54

Beautifully-styled breadcrumbs - example.55

guardian.co.uk56

Beautiful navigation - examples.57

4. Breadcrumbs for Multi-Step Processes

Statement Tracker58 uses a breadcrumb trail to indicate the steps involved in registering for an account, as well as a progress indicator.

Sequential process example.59

Flickr60 uses a breadcrumb trail to indicate the number of sections in the Flickr tour.

breadcrumb61

5. Breadcrumbs with Sub-Navigation

Here are some examples of breadcrumb trails whose links, when clicked on or hovered over, open a sub-navigation panel that lists additional attributes or locations.

MarketWatch62 has a fly-out sub-navigation menu that appears when you hover over a breadcrumb link.

breadcrumb with sub-navigation example.63

Profoto64 has a unique breadcrumb trail: clicking on a breadcrumb link opens an area below it that gives users additional attributes to select from.

Experimental Example 2.65

Cranfield University66 has a similar fly-out breadcrumb scheme, which serves a dual function: as an location indicator for the user and as a robust and interactive secondary navigation scheme.

Flyout Breadcrumbs67

Lonely Planet68 also has a fly-out breadcrumb trail in which you can change attributes.

flyout menu - example 3.69

Clicking on a breadcrumb link takes you to that item’s page, while clicking on the downward-pointing arrow opens additional options.

Flyout menu - example 4.70

MSDN71 has a breadcrumb trail that opens a scrollable sub-navigation list when the user hovers over a link.

subnavigation example 1.72

Wowhead73 has a multi-level sub-navigation scheme.

74

6. Interactive Breadcrumbs

Delicious75 lets you remove items in the breadcrumb trail of keyword tags to help you quickly find bookmarks.

interactive example 1.763

7. Experimental Examples

Booreiland77 uses a breadcrumb-style navigation scheme for its primary menu, allowing visitors to quickly understand what they’re currently viewing.

Experimental example 1.78

User interface designer Aen Tan of AEN UI79 talks about a design pattern called “Tabcrumbs80,” a navigation scheme that combines tabs81 and breadcrumbs.

Tabcrumbs example.82

(al)

Footnotes

  1. 1 http://en.wikipedia.org/wiki/Findability
  2. 2 http://en.wikipedia.org/wiki/Hansel_and_Gretel
  3. 3 http://delicious.com/SixRevisions/webdesign+design
  4. 4 http://delicious.com/SixRevisions/webdesign+design
  5. 5 http://en.wikipedia.org/wiki/Site_map
  6. 6 http://en.wikipedia.org/wiki/Breadcrumb_(navigation)#Types_of_breadcrumbs
  7. 7 http://www.sitepoint.com/article/introducing-joomla/
  8. 8 http://www.newegg.com/Product/ProductList.aspx?Submit=ENE&N=2010090007%2050001375%201054808291&name=MicroATX%20Mini%20Tower
  9. 9 http://en.wikipedia.org/wiki/Bounce_Rate
  10. 10 http://www.slicethepie.com/Music/Default.aspx
  11. 11 http://www.mefeedia.com/entry/fri-feb-27-2009/14804198
  12. 12 http://www.google.com/support/websearch/bin/answer.py?hl=en&answer=134479
  13. 13 http://www.uxmatters.com/topics/ajax-rias-web-20-apps/
  14. 14 http://www.typepad.com/go/design-assistant/
  15. 15 http://www.typepad.com/go/design-assistant/
  16. 16 http://www.nasa.gov/news/budget/index.html
  17. 17 http://www.nasa.gov/news/budget/index.html
  18. 18 http://www.nestle.com/SharedValueCSR/Overview.htm
  19. 19 http://www.nestle.com/SharedValueCSR/Overview.htm
  20. 20 http://www.marchanddetrucs.com/magasin-de-magie/thematiques/close-up/autres/
  21. 21 http://www.marchanddetrucs.com/magasin-de-magie/thematiques/close-up/autres/
  22. 22 http://www.bridge55.com/t-shirts/gio-goi/gio-goi-key-t-shirt-bas100202-black.html
  23. 23 http://www.bridge55.com/t-shirts/gio-goi/gio-goi-key-t-shirt-bas100202-black.html
  24. 24 http://www.overstock.com/Home-Garden/Beds/Twin,/bed-size,/2013/subcat.html
  25. 25 http://www.overstock.com/Home-Garden/Beds/Twin,/bed-size,/2013/subcat.html
  26. 26 http://www.techradar.com/news/computing
  27. 27 http://www.bp.com/productslistsearch.do?categoryId=9007366&contentId=7014115
  28. 28 http://www.techradar.com/news/computing
  29. 29 http://www.techradar.com/news/computing
  30. 30 http://psd.tutsplus.com/category/tutorials/drawing/
  31. 31 http://www.uniquemartique.com/site/martique/product/291
  32. 32 http://psd.tutsplus.com/category/tutorials/drawing/
  33. 33 http://www.uniquemartique.com/site/martique/product/291
  34. 34 http://www.mousetominx.co.uk/products.php?cat=7
  35. 35 http://www.mousetominx.co.uk/products.php?cat=7
  36. 36 http://www.useit.com/alertbox/pr.html
  37. 37 http://www.useit.com/alertbox/pr.html
  38. 38 http://www.target.com/Beach-Towels-Bath-Bed/b/ref=sc_fe_l_2/176-1138487-8856958?ie=UTF8&node=1041470
  39. 39 http://www.target.com/Beach-Towels-Bath-Bed/b/ref=sc_fe_l_2/176-1138487-8856958?ie=UTF8&node=1041470
  40. 40 http://listen.grooveshark.com/
  41. 41 http://listen.grooveshark.com/
  42. 42 http://tv.yahoo.com/the-10-000-pyramid/show/28443/castcrew
  43. 43 http://tv.yahoo.com/the-10-000-pyramid/show/28443/castcrew
  44. 44 http://www.ideo.com/work/item/s500/
  45. 45 http://www.ideo.com/work/item/s500/
  46. 46 http://store.apple.com/us/product/MB352LL/B?fnode=MTY1NDA4NA&mco=MTY1OTg1Nw
  47. 47 http://store.apple.com/us/product/MB352LL/B?fnode=MTY1NDA4NA&mco=MTY1OTg1Nw
  48. 48 http://coolspotters.com/entertainment/websites
  49. 49 http://coolspotters.com/entertainment/websites
  50. 50 http://www.devlounge.net/design/sidebars-that-rock
  51. 51 http://www.devlounge.net/design/sidebars-that-rock
  52. 52 https://launchpad.net/lottanzb
  53. 53 https://launchpad.net/lottanzb
  54. 54 http://www.pixelpoodle.com/?action=news&id=24
  55. 55 http://www.pixelpoodle.com/?action=news&id=24
  56. 56 http://www.guardian.co.uk/world/obama-administration
  57. 57 http://www.guardian.co.uk/world/obama-administration
  58. 58 https://www.statementstacker.com/register/step2
  59. 59 https://www.statementstacker.com/register/step2
  60. 60 http://flickr.com/tour/
  61. 61 http://flickr.com/tour/
  62. 62 http://www.marketwatch.com/newscommentary/industries/technology
  63. 63 http://www.marketwatch.com/newscommentary/industries/technology
  64. 64 http://www.profoto.com/products/profoto/lightshapingtools
  65. 65 http://www.profoto.com/products/profoto/lightshapingtools
  66. 66 http://www.som.cranfield.ac.uk/som/p858/About-Cranfield/Location/Getting-to-Cranfield-via-Public-Transport
  67. 67 http://www.som.cranfield.ac.uk/som/p858/About-Cranfield/Location/Getting-to-Cranfield-via-Public-Transport
  68. 68 http://www.lonelyplanet.com/germany/north-rhine-westphalia/cologne
  69. 69 http://www.lonelyplanet.com/germany/north-rhine-westphalia/cologne
  70. 70 http://www.lonelyplanet.com/germany/north-rhine-westphalia/cologne
  71. 71 http://msdn.microsoft.com/en-us/library/cc295790.aspx
  72. 72 http://msdn.microsoft.com/en-us/library/cc295790.aspx
  73. 73 http://www.wowhead.com/?spells=7.11.574
  74. 74 http://www.wowhead.com/?spells=7.11.574
  75. 75 http://delicious.com/SixRevisions/webdesign+design
  76. 76 http://delicious.com/SixRevisions/webdesign+design
  77. 77 http://www.booreiland.nl/
  78. 78 http://www.booreiland.nl/
  79. 79 http://aenui.com/about-me/
  80. 80 http://aenui.com/user-interface/tabcrumbs-best-of-both-worlds/
  81. 81 http://developer.yahoo.com/ypatterns/pattern.php?pattern=moduletabs
  82. 82 http://aenui.com/about-me/

↑ Back to top Tweet itShare on Facebook

Jacob Gube is the Founder and Chief Editor of Six Revisions, a web publication for web developers and designers, and the Deputy Editor of Design Instruct, a web magazine for designers and digital artists. He has over seven years of experience as professional web developer and web designer and has written a book on JavaScript.

Advertisement
  1. 1

    Thank you for a so resourceful article.

    A type of text-based Web site navigation that breaks the site into links of categories and sub-categories allowing major categories of information to be linked in a range of sequential order. Breadcrumb navigation is displayed to the user, so they can easily see exactly where that Web page is located within the Web site. While many types of Web sites use a breadcrumb navigation, it is becoming increasingly common for electronic commerce Web sites to display categories of products in this way.

    0
  2. 102

    Hi,

    Needed a piece of advice, If I have used different breadcrumb trails for different sections of my website,

    For Eg.

    Computers > System Software > Windows XP (AND)
    Computers > Software Systems > XP for Windows > Paretologic

    How and why will it affect my website?
    Is it advisable to do that? What if I have mistakenly created it and cannot change it?

    Also wanted to know if breadcrumbs play any role in deciding SEO rankings, if it does than how?

    Expecting a positive feedback and reply from your side.

    Cheers.

    0
  3. 203

    Hi there,

    I’m aware it has been a while since the article was published, but could not find a definite answer for the following situation.

    What about having the breadcrumbs on the website 2 times? One time before the page / content starts, the other time at the end of the page. Would that be considered spammy or useful?

    Thanks!

    0

↑ Back to top