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

Use:

• Use Breadcrumbs as secondary navigation.

• Breadcrumbs should be used when there are 2 two or more linear levels to a page hierarchy.

Don’t use:

• Breadcrumbs should never entirely to replace the primary navigation.

• Do not use the breadcrumbs component on pages with a flat structure , or to show progress through a linear journey.

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

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

...

• (one level).

• to show navigation history. Breadcrumbs should only represent page hierarchy.

Accessibility Compliance

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