Skip to end of banner
Go to start of banner

Breadcrumbs

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 5 Next »

Lead:  Yehiel Elad-Certner (Unlicensed)  ONGOING 


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.


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 user’s current page in the end of the raw in regular text
  • The other links in the breadcrumb should behave as text links.
  • Truncation should occur at the 2nd level of the breadcrumb and move upward if necessary
  • The Breadcrumb should be position at the top of the page, below the masthead or above the main header 
  • The breadcrumb can expand across 1 raw of text, truncation should occur when reaching the right border of the page
  • The Breadcrumb Hierarchy links should behave as Text links
  • Every click on a link in the breadcrumb will afford one-click access to higher levels of that hierarchy
  • Breadcrumbs are always treated as secondary and should never entirely replace the primary navigation
  • Breadcrumbs should be used when there are more than 2 linear levels to a page

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

(TBD)




Code

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

  • No labels