UI Controls Dictionary > Breadcrumbs
Breadcrumbs are a compact way to show navigation hierarchy. They are unobtrusive and not distracting.
They not only show users where they are, but provide an easy way to allow them to navigate up multiple levels.
They only require a small amount of space and are very familiar to most users. The Nielsen Norman Group writes that "user testing shows many benefits and no downsides to breadcrumbs for secondary navigation."
As stated above, breadcrumbs are considered secondary navigation, meaning that they shouldn't be provided as the only way for users to navigate.1 This is because they are not as obvious or noticeable as other navigation methods, such as Tabs.
You can use breadcrumbs when there is no visible way to navigate back to the parent page. Breadcrumbs are not needed, for example, with hierarchical vertical navigation, such as a tree control, because the navigation path is always visible.
Breadcrumbs can be preferable to other hierarchical navigation controls when space (especially in the horizontal direction) is constrained, such as on mobile. They might not be ideal for very deep hierarchies, however, where they can become very long. See the variations below for how they can be condensed in these cases.
Breadcrumbs should be constructed from standard links and text, and should inherit the same states. As with standard links, breadcrumb links may have normal, hover, active, and visited states.
Condensed Breadcrumbs - You may use this pattern when the number of items exceeds about 5 or as space requires. Clicking on the "..." can expand the entire list, or only the last few items.
Dropdown Breadcrumbs - This is a less common pattern that combines breadcrumbs with a vertical menu to allow users to navigate non-linearly. It is not standard and should be used sparingly. You can find some examples and guidelines for this pattern here.