Breadcrumb

Explanation:

A breadcrumb in product interfaces offers a hierarchical navigation system, guiding users through different levels of content or functionality. It allows them to keep track of their locations within complex products and navigate back to higher levels efficiently.

Overview:

Breadcrumbs are a series of sequential links that represent the navigation path a user has taken within the product. They are a secondary navigation scheme and should not replace primary navigation methods.

When to use:

• Within multi-level interfaces where users need to track their navigation path.

• In complex applications with a deep structure of content or functionality.

• When quick navigation back to parent sections is essential.

When not to use:

• In single-level applications where the navigation path is linear and shallow.

• When screen space is limited, and the navigation path can be easily inferred without additional cues.

Formatting:

Breadcrumbs should be horizontally displayed, typically at the top of a page, with separators like chevrons (>) or slashes (/) indicating the level hierarchy.

Anatomy:
Comprises a list of clickable text elements, usually starting with the home page or main section and ending with the current page, which is not clickable.

Alignment:
Breadcrumbs are usually aligned to the left, following the reading direction, and placed at the top of the content area to maintain hierarchy and accessibility.

Placement:

Position breadcrumbs at a consistent location across the product to maintain a predictable pattern for users.

Content:

Should include succinct labels for each level, accurately reflecting the structure of the product content or functionality.

Behaviours:

Breadcrumbs should change appearance on hover and focus to indicate interactivity and provide feedback on user actions.

Interactions:

Interacting with a breadcrumb link should take the user directly to the associated section or level without unnecessary steps or delays.