Description

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

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

...

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

Structure

The breadcrumbs component should include:

• the user’s current page in the end of the row in regular text

• The other links in the breadcrumb should behave as text links.

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

...

• Every click on a link in the breadcrumb will access to higher levels of that hierarchy

Best practices

Use:

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

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

Don’t use:

• Breadcrumbs should never entirely replace the primary navigation

• Do not use the breadcrumbs component on pages with a flat structure, 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>>

...