Breadcrumb

Problem summary

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

Examples

No items found.

Solution

Reveal the user’s hierarchical location and provide links to higher levels.

  • Show the labels of the sections in the hierarchical path that lead to the current page being viewed.
  • Each label is a link to a section.
  • The label of the current page is at the end of the breadcrumb and is not linked.
  • Each label is separated with a special 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 serve as an effective visual aid, indicating the location of the user within the website’s hierarchy, making them a great source of contextual information for landing pages. Also, breadcrumbs allow for easy navigation to higher-level pages.

  • Breadcrumbs inform users of their location in relation to the entire sites hierarchy.
  • The structure of the website is more easily understood when it is laid out in a breadcrumb than if it is put into a menu.
  • 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 deceptive, 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.

Resources

Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection

Ecommerce
iOS
Website
Dashboard
Flowchart
VIEW BUNDLE