...
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 links.
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. The truncation will apply to the next levels as needed, while always keeping the first and last levels untruncated.
 |
Placement and Positioning
The breadcrumb should be positioned at the top of the page, below the masthead or 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 breadcrumb hierarchy links should behave as Text links.
...
State | Image | Comment | ||
|---|---|---|---|---|
Regular |  | |||
Hover |  | |||
Active |  | Disabled | ||
 | Focused |  | ||
Focused Hover |  | |||
Focused Active |  | Focused Disabled |  |
Interaction
Every click on a link in the breadcrumb will navigate to higher level pages within that hierarchy.
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.
...
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/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">
<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> |