Projects/Usability/HIG/Breadcrumbs

Purpose

The breadcrumbs pattern is a navigation aid that helps to keep track of the locations within programs or documents by a) providing information about the current position within the hierarchy, and b) offering shortcut links to jump to previously positions without using the Back button (e.g. home > documents > business). The breadcrumb extends the address bar with (clear) access to subsections. It has the advantage of distinctness in usage. As a drawback the breadcrumb usually needs more space.

Is this the right control

• Use a breadcrumb for orientation and navigation in strictly hierarchical data. Apply other controls like tags for flat or less organized content.
• Make sure the breadcrumb has only supportive functions. Do not use it as primary and exclusive navigation pattern.
• Do not use a breadcrumb to just identify or label of the position.
• Do not make the breadcrumb navigation dynamic by adopting the last users interactions (known as 'path breadcrumb'). Breadcrumbs should show the hierarchy, not the user's history.

Behavior

• Link all breadcrumb steps to the appropriate page or position respectively, except the current.
• Add the current position to the breadcrumbs.
• Consider to provide a dropdown list for alternate options on each level. But always offer one-click access by default.
• Consider to make the breadcrumb interactive via drag and drop, e.g. copy/move files, apply a sequence of processing steps, etc.

Appearance

• Keep the breadcrumb plain; do not use icons or other controls.
• Place the breadcrumb above the content control (e.g. file list).

• Do not place it above the navigation control (e.g. directory structure)
• Do not integrate it into the tool bar
• Do not place it in an extra tool bar.
• Do not integrate it into the title bar.

Best practice

^tbd by VDG

Implementation

^tbd by devs