What is Breadcrumb ?
Breadcrumb is a mechanism for keeping track of the user’s location within an application and provides navigation facility.
- Breadcrumb takes up very little space and hence helps in space availability for the display of content.
- 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.
- 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 also has a lot of navigation, breadcrumb can help is saving space for content as well as giving proper navigation facility.
- The user cannot easily navigate through the hierarchy via other local navigation methods.
- In case of a web application, if 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.
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.