...
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 untruncatednon-truncated.
...
Placement and Positioning
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.
States
State | Image | Comment |
|---|---|---|
Regular |
 | |
Hover |
 | |
Active |
 | |
Focused |
 | |
Focused Hover |
 | |
Focused Active |
 |
Interaction
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.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
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 |
Responsive design
Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting 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 |
|---|---|
.png?version=1&modificationDate=1668324787291&cacheVersion=1&api=v2) |
Code
| Html macro | ||
|---|---|---|
| ||
<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> |
...