Breadcrumb

In websites and applications, a breadcrumb allows users to know where they are. Also, the breadcrumb gives users a way to navigate around websites or applications with a fewer number of clicks.

When and why to use?

Use the breadcrumb for large websites or those which are hierarchically divided into subsections. When considering the breadcrumb creation, you should base on logical categories that enhances the searchability.
Use the breadcrumb when you want to provide information about location and shortcut links to jump to previously viewed pages. Users will easily see structure of a site/application through breadcrumbs.

Template

Here is a standard breadcrumb template:

Markup

In details:

Object	Class
Breadcrumb	`breadcrumb`
Text Link	`body`, `a`, `a:hover`, `a:active`
Breadcrumb divider	`uiIconMiniArrowRight`

Status

Status	Description
Standard Status	Label of a section in the hierarchical path that users can click to go to the home or previous/parent page of the being viewed page.
Being Viewed Status	Label of the current page which is at the end of breadcrumbs and is not linked.

Rules

BR-01	No breadcrumb at the homepage.
BR-02	Breadcrumbs are on top of a page.
BR-03	Breadcrumb label is the page content title.
BR-04	The label length of breadcrumbs is limited to 20 characters.
BR-05	Hyperlink all labels except the last one and breadcrumbs icon.
BR-06	Hyperlink should be styled the same regardless of whether it has been visited or not.
BR-07	Breadcrumb box must cover the breadcrumb path.
BR-08	Breadcrumb length must be auto-resized and has the same minimum limitation in comparison to its size.
BR-09	Breadcrumbs are broken if their labels are longer than the minimum limitation.
BR-10	There are 2 spaces before and after each breadcrumb divider.