Lead: Yehiel Elad-Certner (Unlicensed)
| Status | |
|---|---|
|
|
|
| Table of Contents |
|---|
Description
Breadcrumbs should be used as a secondary navigational aid, They 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
General guidelines
...
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.
...
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 row 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 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 2 or more 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>>
...
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 >>
...
<<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>>