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 to 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 steppage.

...

Usage &

...

Behavior

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 page hierarchy (path) in regular text, with > as a divider between levels.

• The user’s current page in at the end of the row in regular plain text.

• The other links (parent) pages in the breadcrumb should behave as text linkshierarchy as Text Links.

• When a breadcrumbs line exceed the page width breadcrumb line exceeds its container’s width, truncation should occur at the 2nd level of the breadcrumb, and move upward if necessary . The truncation will apply to the next levels as needed, while keeping the first and last levels non-truncated.

...

Placement and Positioning

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

• The breadcrumb can only expand across 1 one 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 .

States

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

Interaction

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

Best practices

...

Breadcrumbs are always treated as secondary and should never entirely replace the primary navigation

...

Use:

• as secondary navigation.

• when there are 2 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.

Accessibility Compliance

Unless otherwise specified, see our general 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>>

Focus management

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

Screen reader support 

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

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>information in Fundamentals - Accessibility.

Focus management

Responsive design

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.

...

Design

Code

...

https://zpl.io/VkqxLgM

Image Added

Code

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