Lead:  Yehiel Elad-Certner (Unlicensed)  

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.

Basic Flow

<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >> 

Types 

<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case each type should be described in a sub-page >>

<<If you are using this section Usage & Behaviour should be used only for the Common functionalities in the page>>

...

Usage & Behaviour

<< Use a visual for each sub-section >>

General guidelines

<< Describes the component, use sub-section when they are relevant to the components >>

<< In case of a complex component duplicate this section, describing each sub-component separately >>

Structure

<<A description of the structure of the component, including areas, sub-components etc.>>

Placement and Positioning

<<For example, in popups and toast messages>>

Default State

<<When there is more than one state for a control or area. Including default values>>

Content

<<Including labels, microcopy, number of items, order of items etc.>>

Internal Logic

<<For example, controls dependencies in a form>>

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

Interaction

<<for example, how to change a value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Validations and errors

<<used for specific components e.g. slider>>

Transitions

<<Used to describe transitions or animations the occurs in any of the interaction stages>>

Best practices

<<e.g. Slider should display a label its on>>

Image Added

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

Placement and Positioning

• 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

States

• The Breadcrumb Hierarchy links should behave as Text links

Interaction

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

Best practices

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

...

Code

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