Get Free Email Updates | Have an Account?
  • Free email newsletter
  • LinkedIn
  • Twitter
  • Facebook
  • RSS Feed

Breadcrumb Navigation Best Practices

If your users are Hansel and Gretel, then your website is the woods, and your navigation is their breadcrumb

The word “breadcrumb” is derived from that old fairytale, Hansel and Gretel. Remember them? They left a trail of breadcrumbs to remind them of where they came from when they ventured into the woods. Well, on the Internet you can consider your website the woods, and your navigation the breadcrumbs.

Breadcrumbs look like this: Home > Topic Name > Article Name

Breadcrumbs have been considered a web design best practice, but Jared Spool of User Interface Engineering made a good point about why a publisher would use breadcrumbs. Breadcrumbs shouldn’t be used to overlook the overall design of your site. In this context, Spool argues that “breadcrumbs are only a little better than the back button (or links labeled “back” or “previous”). Users only pay attention to the breadcrumb when they have lost the scent or somehow need context as to where they are in the site. If users are looking for breadcrumbs in this context, it’s likely that it’s because the scent is poor. Instead of making the breadcrumbs robust, it’s better to invest the development effort in improving the scent.”

Discover the 9 most profitable subscription website business models when you download our FREE Subscription Website Publishing handbook today.

Breadcrumbs themselves are considered a best practice in website navigation, but Steve Krug, author of Don’t Make Me Think, claims that these are the best practices for breadcrumbs themselves:

  • Put the crumbs at the top
    • Keeping the breadcrumbs at the top the page make for an effortless non-confusing way of navigation. It is also the most common quadrant to find breadcrumbs, so users looking for this navigation will be able to find yours easily.
  • Use (>) between levels
    • According to Krug, trial and error seems to have shown that the best separator between levels is the ‘greater than’ character.
  • Use tiny Type
    • To make it apparent that the breadcrumbs are simply an accessory and not part of your content.
  • Use the words “You are here”
    • Even though the type is small it cannot hurt to make it self-explanatory.
  • Boldface the last item
    • The boldness will make it obvious to the user where they are on your website.
  • Don’t use them instead of a page name
    • Do not make the last item double as page name and navigation location. If you are going to use breadcrumbs use both.

The key to persistent navigation is to help the user find anything on the site, fast. No clicking around or desperately hitting the back button. Make it clear where they are, how to get somewhere else, and how to return to where they came from.

Related Posts

Posted in Subscription Website Publishing

Tagged with .

3 Responses to “Breadcrumb Navigation Best Practices”

  1. Michael Says:

    Steve Krug’s book “Don’t make me think” is standard reading for any usability designer and recommended reading for anyone interested in good design and best practice.

    The information in the book is very accessible regardless of technical knowledge. He is also a lot less controversial and sensationalist than Jakob Nielsen.

  2. Techno Says:

    Hello very nice web site!! Guy .. Beautiful .. Superb .. I will bookmark your web site and take the feeds also?I’m happy to search out so many useful info here within the publish, we want work out more techniques on this regard, thank you for sharing. . . . . .

  3. pavan kuchana, website design, web development, graphic designers, mobile applications developer, it consultants, it consultancy, it recruiters, hr recruiters, wealth management, telecom services Says:

    It’s really a great and useful piece of information. I’m happy that you just shared this helpful information with us. Please stay us informed like this. Thank you for sharing.

Leave a Comment