Breadcrumbs Design pattern

Problem summary

The user needs to know his location in the website's hierarchical structure in order to possibly browse back to a higher level in the hierarchy.

Example

Breadcrumbs

Usage

  • Use when the structure of the website follows a strict hierarchical structure of similar formatted content.
  • Use when the structure of the site is parted in to sections which can be divided into more subsections and so on
  • Use when the user is most likely to have landed on the page from an external source (another site deep linking to the web page in question). For instance from a blog or a search engine.
  • Use when the page in question is placed fairly deep into the hierarchy of pages and when no other form of visual navigation can show the details of the same deep level.
  • Use together with some sort of main navigation.
  • Do not use on the topmost level of the hierarchy (typically the welcome page)
  • Do not use alone as the main navigation of the website.

Solution

  • Show the labels of the sections in the hierarchical path that leads to the viewed page.
  • Each label of the higher level subsections have links that lead to the respective section of the site.
  • The label of the current page is at the end of the breadcrumb and is not linked.
  • Each label is parted with a separating character. Popular characters are » (») or >.
  • The separating characters and the spaces between the links and the labels are not linked.
  • The labels of each section preferably match the titles of that section.

Rationale

  • Breadcrumbs show the user where he is now in relation to the site’s hierarchy: how information is structured.
  • The structure of the website is more easily understood when it is layed out in a breadcrumb than if it is put into a menu, why the learning to navigate the site comes natural.
  • Breadcrumbs take up minimal space and even though not all users use them, they still hint the structure of the website and the current location of the page in question.
  • The term ‘breadcrumb’ is wrong, as it implies the history of how the user got to that page. A more correct term would describe the current location’s place in the hierarchy of the website.

More example images of the 'Breadcrumbs' pattern

  • Breadcrumbs

    From apple.com.

  • www.bell.ca

    Breadcrumb at bell.com

  • www.profoto.com

    A breadcrumb trail with dropdown that show the menu options at that level.

  • typepad.com

    Breadcrumb used to display the steps in a wizard.

26 Comments

Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 132 votes, 85.61% like this one.

Related links