Changeset View
Changeset View
Standalone View
Standalone View
source/patterns/navigation/breadcrumb.rst
| 1 | Breadcrumb patterns | 1 | Breadcrumbs | ||
|---|---|---|---|---|---|
| 2 | =================== | 2 | =========== | ||
| 3 | 3 | | |||
| 4 | .. container:: intend | 4 | .. container:: intend | ||
| 5 | 5 | | |||
| 6 | |desktopicon| |mobileicon| | 6 | |desktopicon| |mobileicon| | ||
| 7 | 7 | | |||
| 8 | Pattern for n-deep content structure. | 8 | Pattern for n-deep content structure. | ||
| 9 | 9 | | |||
| 10 | .. image:: /img/NP-n-deep.png | 10 | .. image:: /img/NP-n-deep.png | ||
| 11 | :alt: Breadcrumb patterns | 11 | :alt: Breadcrumb patterns | ||
| 12 | 12 | | |||
| 13 | - These patterns provide awareness of the path within the content | 13 | The *breadcrumbs* pattern is a navigation aid for hierarchical content | ||
| 14 | structure. | 14 | structures (e.g. home > documents > business). It provides information about | ||
| 15 | - Interaction is usually required to determine location relative to | 15 | the current position within the hierarchy, and offers shortcut links to jump | ||
| 16 | adjacent content on the previous level. | 16 | to previous positions without using the Back button. | ||
| 17 | - The pattern may also be applied to 2-deep and 3-deep content | 17 | | ||
| 18 | structures. | 18 | When to use | ||
| 19 | ----------- | ||||
| 20 | | ||||
| 21 | - Use a breadcrumb control for orientation and navigation in strictly | ||||
| 22 | hierarchical content. Apply other controls like tags for flat or less | ||||
| 23 | organized content. | ||||
| 24 | - Make sure a breadcrumb control has only supportive functions. Do not use | ||||
| 25 | it as primary and exclusive navigation pattern. | ||||
| 26 | - Do not use a breadcrumb control to just identify or label the position; | ||||
| 27 | it must be interactive. | ||||
| 28 | - Do not make the breadcrumb control dynamic by showing the user's past | ||||
| 29 | interactions (known as 'path breadcrumbs'). Breadcrumbs should | ||||
| 30 | show the hierarchy, not the user's history. | ||||
| 31 | | ||||
| 32 | How to use | ||||
| 33 | ---------- | ||||
| 34 | | ||||
| 35 | - Link all breadcrumb steps to the appropriate page or position. Show the | ||||
| 36 | current position at the very end of the breadcrumb control. | ||||
| 37 | - Keep breadcrumbs plain and textual; do not use icons or other controls. | ||||
| 38 | - Place a breadcrumb control above the content area, but below other | ||||
| 39 | navigation controls. | ||||
| 40 | - Do not integrate a breadcrumb control into a toolbar or titlebar. | ||||
| 41 | | ||||
| 42 | Implementation | ||||
| 43 | -------------- | ||||
| 44 | | ||||
| 45 | - Consider providing a dropdown context menu full of alternative options for | ||||
| 46 | each breadcrumb item. But always offer one-click access by default. | ||||
| 47 | - Think of ways to make the breadcrumb control interactive in other creative | ||||
| 48 | ways. For example, it might permit content to be dragged-and-dropped | ||||
| 49 | onto a breadcrumb item to quickly move it there. | ||||