Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

State

Image

Comment

Regular

Image RemovedImage Added

Hover

Image RemovedImage Added

Active

Image RemovedImage Added

Focused

Image RemovedImage Added

Focused Hover

Image RemovedImage Added

Focused Active

Image RemovedImage Added

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

...

Zeplin link

Screen thumbnail

https://zpl.io/VkqxLgM

Image RemovedImage Added

Code

Html macro
sanitizefalse
<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">



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

...