Skip to main content

Tech Word To Know: Breadcrumbs

Turkey dinners and fairytales. When I think about “breadcrumbs”, no immediate connection to website navigation appears in my brain. No, I’m considering pesky birds. Flaky pastries.

But I’ve got to consider breadcrumbs in a tech context. And you might need to as well, especially if your business’ site has lots of pages and little organizational direction.

Here’s what Smashing Magazine contributor Jacob Gube has to say about breadcrumbs:

“A ‘breadcrumb’ (or ‘breadcrumb trail’) is a type of secondary navigation trail that reveals the user’s location in a website or Web application”.

Remember the purpose of Hansel and Gretel’s breadcrumbs in the fairytale story. It provided a backtracking tool as they hiked deeper and deeper into the forest. Imagine your web users crawling deeper through pages on your site, and being able to backtrack one step, or three, or seven, thanks to the breadcrumb trail being shown (usually below the title bars or headers, in a horizontal fashion).

How freeing for users: no “Back” button nonsense to worry about as they engage with your compelling content and click onwards. Breadcrumbs answer the questions “Where am I? How do I get back?” with simplicity. For a site with loads of hierarchical and/or grouped information, breadcrumbs can greatly improve site design and user experience. And they don’t look half bad on the page, either.

There’s 3 types of breadcrumbs:

1. Path: This shows the user the trail they took through a site to get to where they are. This isn’t a popular practice online, because Path breadcrumbs basically handle what a “Back” or “Forward” button does.

2. Location: Static breadcrumb trail that displays the hierarchal sequence of links that have gotten you to where you are. It might look something like this:

Home page > About Us > Sarah Bauer

You can see where “Sarah Bauer” fits in the site’s organizational hierarchy. It can be accessed via the “About Us” page, which is accessed from the home page.  It’s not necessarily the path the user took, but it offers an explicit system for pinpointing location within a site.

3. Attribute: These “display the attributes of a particular page” (Gube). It would look something like this:

Home> Women’s Wear> Jeans>Slim Jeans> True Religion

In this trail, we see that the path has been laid out by the attributes of the items on the page. It’s everything in the “Slim Jeans” category, and the brand “True Religion”.

Exciting, right? Especially for us Tidy Teds out there, who like to keep things organized. But don’t go leaping into breadcrumb land unless you manage a multi-page site with lots of content. Even then, there are other options. This is just one.

If breadcrumb trailing looks like the right fit, remember these tips for effective implementation. And happy baking!

  • Keep the trail horizontally placed at the top of the page, under the header. This makes it easy for the user to monitor.
  • Keep breadcrumbs discreet. No need to get flashy. The trail isn’t the star attraction of the user experience, it’s the safety beacon, used if need be. With small text (but not too small) and standardized font, it can just hover quietly at the top of the page.
  • Distinguish the current page from the rest in the trail heading by slightly altering the font, either in size or type. It reminds the user of the page they’re currently residing on.
  • Commit. Decide if you’re going to go ahead with implementing breadcrumb navigation, and use it throughout, for all pages. And don’t assume this is the only means of navigation necessary. As web and interface designer Shay Howe suggests, “You should always provide users with a primary navigation from which they can navigate a website before using breadcrumb navigation.”

References

“Breadcrumb (navigation).” Wikipedia entry modified 22 September 2011. http://en.wikipedia.org/wiki/Breadcrumb_(navigation)

Jacob Gube “Breadcrumbs in Web Design: Examples and Best Practices.” 17 March 2009. Smashing Magazine: http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

Shay Howe “Breadcrumb Navigation Examined: Best Practices and Examples.” 12 October 2009. Hongkiat.com: http://www.hongkiat.com/blog/breadcrumb-navigation-examined-best-practices-examples/

3 comments

10

  1. Daddaddaddyo

    December 2, 2011

    Good article Sarah. Clear and informative!

  2. Arelthia

    December 14, 2011

    Sarah,
    Thanks for sharing this great explanation of breadcrumbs. I like that you point out that it is not the only option but can be very helpful in making a site easy to navigate.

  3. Twitter Search Engine: How to Use FeelTipTop to Refine Twitter Searches for Targeted Replies

    April 20, 2018

    […] that Tip Top provides you with an important and time-saving web usability feature: breadcrumbs to get back to your previous […]

Related Posts

Kelowna SEO Company | Navigator Multimedia

The Navigator Multimedia team having a meeting in the office boardroom, ready to help our clients succeed with graphic design, web development, online marketing, and general digital marketing support..

30 Marketing Strategies for Small Businesses Learned from 30 Years in Digital Marketing

Here are 30 effective marketing strategies and marketing initiatives for small businesses in 2023-24.

Four people sit and stand around two laptops as they study SEO and digital marketing for their online business.

The Importance of SEO & Content Marketing in Digital Marketing (2023 Guide)

Own a business, work in sales, or manage a marketing department? This article explains the importance of SEO (search engine...

A pair of hands types an a Mac laptop computer while examining a Google Analytics report to prepare for the switch from Universal Analytics to GA4.

Google Analytics Is Updating from Universal Analytics To GA4

Here’s Navigator Multimedia’s Guide To Help You With The Switch Google Analytics is one of the most important tools for online marketing and analyzing website performance. As the way we navigate the web changes, Google Analytics needs to adapt accordingly....