Content Comparison

...

Status

colour	Yellow
title	ongoing

...

Status

colour	Red
title	on hold

...

Related Pages: << Links to related pages, if relevant >>

Table of Contents

<< Short description of the component and when it is used >>

<< Most communicative screenshot of the component >>

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

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

...

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

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

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

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

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

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

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

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

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

<<use Click target to describe the interaction>>

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

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

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

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

...

<<Short Zeplin link. You
Use this
Image Removed>>

...

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

Table of Contents

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 to a parent-level page.

...

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 its container’s width, truncation should occur at the 2nd level of the breadcrumb. The truncation will apply to the next levels as needed, while keeping the first and last levels non-truncated.

...

The breadcrumb should be positioned at the top of the page, below the VerinTop, and above the main header.
The breadcrumb can only expand across one row of text.

State	Image	Comment
Regular	Image Added
Hover	Image Added
Active	Image Added
Focused	Image Added
Focused Hover	Image Added
Focused Active	Image Added

Clicking a link in the breadcrumb will navigate to higher level pages within that hierarchy. The new page will be opened in the same tab.

Use:

as secondary navigation.
when there are two or more linear levels to a page hierarchy.

Don’t use:

to replace the primary navigation.
on pages with a flat structure (one level).
to show navigation history. Breadcrumbs should only represent page hierarchy.

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Keyboard	Description
Tab	Navigates to the next link inside the breadcrumb trail. On the last link it will navigate to the next component.
Shift + Tab	Navigates to the previous link inside the breadcrumb trail. On the first link it will navigate to the previous component.
Space	N/A
Enter	Applies the link.
Esc	N/A
Arrows	N/A

Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.

The breadcrumbs placement and positioning is fixed, regardless of screen width or height.
Where a breadcrumb line exceeds the container width:
- truncation will apply to all central items, while keeping the first, last, and second-last levels non-truncated.
- truncation should apply to all of the central items equally, so each has the same available space.
- the spacing between each level should remain static.
- each level should have a minimum width of 2 characters.

...

Zeplin link

Screen thumbnail

https://zpl.io/VkqxLgM

Image Added

Html macro

sanitize	false

<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<style>
.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item.active {
  color: #666666 !important;
}
</style>



<div class="card">
			<div class="card-header">Breadcrumbs <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre').toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-4">
							<nav aria-label="breadcrumb">
							  <ol class="breadcrumb breadcrumb-sm">
							    <li class="breadcrumb-item"><a class="text-link" href="#">First Level</a></li>
							    <li class="breadcrumb-item"><a class="text-link" href="#">Second Level</a></li>
							    <li class="breadcrumb-item"><a class="text-link" href="#">Third Level</a></li>
							    <li class="breadcrumb-item active" aria-current="page">Current Location</li>
							  </ol>
							</nav>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-sm">
    <li class="breadcrumb-item"><a class="text-link" href="#">First Level</a></li>
    <li class="breadcrumb-item"><a class="text-link" href="#">Second Level</a></li>
    <li class="breadcrumb-item"><a class="text-link" href="#">Third Level</a></li>
    <li class="breadcrumb-item active" aria-current="page">Current Location</li>
  </ol>
</nav></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>

Version	Old Version 1	New Version Current
Changes made by	Yehiel Elad-Certner (Unlicensed)	Guy Hivroni (Unlicensed)
Saved on	Mar 03, 2020	Feb 12, 2024

Content Comparison

Versions Compared

Key

Description

Basic Flow

Types

Usage & Behaviour

General guidelines

Structure

Placement and Positioning

Default State

Content

Internal Logic

States

Interaction

Validations and errors

Transitions

Best practices

Accessibility compliance

Focus management

Screen reader support

Contrast & size compliance

Design

Code