...
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.
...
Zeplin link | Screen thumbnail |
---|---|
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"> <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> |
...