Breadcrumb Navigation

Comments

(no comments yet)

Log in or Join to leave comments.

Article Metadata

---

Article

Created: User:Aadhar14b (25 Jun 2009)

Last edited: hamishwillee (09 May 2012)

What is Breadcrumb?

A breadcrumb is a user interface navigation mechanism. It shows both the current location and previous location(s) required to get to the current location within the navigation hierarchy.

Advantages

Breadcrumb navigation can provide a very compact mechanism for orienting a user within an app or document set:

• Gives user the knowledge of their current location relative to higher-level concepts.
• One-click navigation to navigate back to higher levels in the hierarchy.

Traditional Navigation / Breadcrumb Navigation

Disadvantages/Limitations

• Lack of proper update, especially on web applications when new pages are added or there is modification in hierarchical structure, can cause inconsistency or broken links.
• Breadcrumb is more useful on a stylus-driven device and not appropriate for scroll and select devices.

When to use ?

• When the application is heavily content driven and has many nested levels a breadcrumb can help locate the user within the document structure
• The user cannot easily navigate through the hierarchy via other local navigation methods.
• When a user might arrive to a page from an external source (e.g., through a search engine) and the user will need a sense of context.

Guidelines while implementing Breadcrumb

• Whenever possible, labels of breadcrumb should match the title of the corresponding form/page of the application.
• Display the title of the current form/page as the last label in the breadcrumb and don’t provide hyperlink to it.
• Avoid to hyperlink the symbol (e.g. sign ( >> )) that separates the labels.
• Hyperlink color/style of the breadcrumb should be the same irrespective of whether the link was previously visited by user or not.
• Use ‘Title Case’ for labels in the breadcrumb.
• Avoid using breadcrumbs for single-level hierarchy navigation that have no logical hierarchy or grouping.

Design Tip

Using combination of breadcrumb and fly-out navigation

Combination of breadcrumb and fly-out navigation is helpful in displaying child menus related to each level of the breadcrumb.

Implementing this concept - When a user ‘clicks on’ or ‘hovers over’ a breadcrumb link, the link opens a sub-navigation panel that lists additional attributes.