Description

Breadcrumbs should be used as a secondary navigational aid. They indicate the current page’s location within a hierarchy and help the user to understand where they are in relation to the rest of that hierarchy.

Breadcrumbs enable users to move quickly up to a parent-level page or previous step.

...

Usage & Behaviour

General guidelines

Breadcrumbs are very effective in products that have a large amount of content organized in a hierarchy of more than two levels.

Breadcrumbs are always treated as secondary and should never entirely replace the primary navigation.

Structure

The breadcrumbs component should include:

• The page hierarchy (path) in regular text, with > as a divider between levels.

• The user’s current page at the end of the row in plain text.

• The other (parent) pages in the hierarchy as text links.

• When a breadcrumb line exceeds the page width truncation should occur at the 2nd level of the breadcrumb, and move upward if necessary, while always keeping the first and last levels.

...

Placement and Positioning

...

• Every click on a link in the breadcrumb will navigate will navigate to higher level pages within that hierarchy.

Best practices

Use:

• Use breadcrumbs as secondary navigation.

• Breadcrumbs should be used when there are 2 or more linear levels to a page hierarchy.

Don’t use:

• Breadcrumbs should never entirely replace the primary navigation.

• Do not use the breadcrumbs component on pages with a flat structure (one level), or to show progress through a linear journey.

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

...