Breadcrumb
Usage | Types | Design-relevant Attributes | Related Controls
|
|
| Figure 1: Search result using breadcrumbs | |
Breadcrumbs
- Inform users about their current position within a hierarchy, such as an application, a directory, a Website, or a document
- Allow for easy navigation back to the starting point, or to other levels within a hierarchy
Usage
Software applications and information in the Web are often organized hierarchically: General information may lead to more specific information, thus creating an information hierarchy. The breadcrumb control informs the user about the path to a specific content within such a hierarchy. For example, hit lists typically include a breadcrumb to inform users about the hierarchy level of a search result and therefore are guides to the list items. If the breadcrumb uses links in the path description, the user can move to a specific folder or topic.
An item in the breadcrumb chain is called breadcrumb item. Breadcrumb items can be defined by models or manually.
Figure 2: A wrapped breadcrumb
If the breadcrumb line becomes longer than the width of the browser window, the breadcrumb is word-wrapped like a text line (figure 2). The wrapping is done at word separators, such as blanks. If there is no word separator in the breadcrumb item string, the breadcrumb will wrap behind the breadcrumb item separator ">".
Types
Breadcrumbs can be displayed as simple path information (no link, figure 3 top), as a chain of clickable locations within the hierarchy (figure 3 center), or as one link that is described by the path information (figure 3 bottom).
|
|
Figure 3: Simple path information (top), each breadcrumb item is linked independently (center), whole path is selectable (bottom)
The breadcrumb type is set through the attribute behavior: value SINGLELINK creates a breadcrumb, where the whole path is selectable; value DEFAULT creates a breadcrumb, where each item can be linked independently.
Usage - Types
Use the different breadcrumb types for the following purposes:
- Use path information breadcrumbs (figure 3 top) for indicating
the location of files inside a hierarchy.
Example: A list of search results not only shows the hits themselves but also their paths. - Use independently linked breadcrumbs (figure 3 center) if you
want to allow users to move up and down within a hierarchy, or to jump
to a certain category.
The last breadcrumb always shows the actual page and is no link. - Use the whole breadcrumb path as one single link (figure 3 bottom) to inform users about the location of a link target ( = the last breadcrumb item) inside a hierarchy.
Design-relevant Attributes
size
Breadcrumbs come in three different font sizes: large, medium (=
default) and small (figure 4). Set the attribute size
to the values LARGE, MEDIUM, or SMALL.
|
|
Figure 4: Large, medium, and small size breadcrumbs
Use the text size that correspond to the size of the surrounding text. In case space requirements are tight, use smaller text sizes if available. These sizes may also be used for design and highlighting reasons.