...

Breadcrumbs enable users to move quickly up to a parent-level page or previous step.

...

Usage & Behavior

General guidelines

...

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

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

...

Placement and Positioning

• The breadcrumb should be positioned at the top of the page, below the masthead or the VerinTop, and above the main 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 user’s current page at the end of the row should be plain text (no link).

State	Image	Comment
Regular

Image Removed

Image Added
Hover

Image Removed

Image Added
Active

Image Removed

Disabled

Image Removed

Image Added
Focused

Image Removed

Image Added
Focused Hover

Image Removed

Image Added
Focused Active

Image Removed

Image Added

Focused Disabled

Image Removed

Interaction

• Every click on 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.

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 (1 one level).

• Do not use breadcrumbs to show progress through a linear journey. They navigation history. Breadcrumbs should only represent page hierarchy.

...

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

Zeplin link	Screen thumbnail
https://zpl.io/VkqxLgM

Image Removed

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

...