Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 13 Next »

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

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.

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.

  • The breadcrumb should be positioned at the top of the page, below the masthead or above the main header.

  • The breadcrumb can only expand across 1 row of text. Truncation should occur when reaching the right border of the page.

  • The breadcrumb hierarchy links should behave as Text links.

  • The user’s current page at the end of the row should be plain text (no link).

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

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>>

<<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 >>

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

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

Design

Zeplin link

Screen thumbnail

(TBD)




Code

<<a box containing the code - discuss with Femi>>

  • No labels