...
Clicking a dedicated icon, for example, the Moreicon in a Data Table row.
Right-clicking on a dedicated area on the screen.
Selecting text, for example in a transcription.
...
A list of action options, shown inside a small container. There are three types of actions:
Simple actions, such as Copy. Represented by text, with or without an icon.
Complex actions, such as columns. Text followed by an ellipsis (…), with or without an icon. These open a new Dialog when clicked.
Toggle actions, such as Show working hours. Text with an associated check sign to show when it is selected.
Action options may be divided into groups. In this case, a horizontal divider will be shown between the groups.
...
The user can navigate between items using the Up and Down arrow keys and select an item using the Enter key.
Clicking an item can perform several actions:
Simple actions (such as Copy). The action is performed and the menu is closed.
Complex actions. A Dialog appears (e.g. for a column selector), and the menu is closed.
Toggle actions. The option is checked or unchecked. In most cases, the action is performed as soon the option is clicked (e.g. updating the view of a chart).
Clicking outside the menu closes it without performing any action.
...
If there are more than 10 action options → consider using a toolbar or a Ribbon /wiki/spaces/UserExp/pages/1390479038.
For selecting values → use a Drop-down Menu
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
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">
<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/bootstrap-tooltip-custom-class.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">Action Button <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">
<div class="dropdown-menu dropdown-menu-sm position-static show">
<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item toggle selected" href="#">Toggle Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a>
<a class="dropdown-item disabled" href="#" tabindex="-1">Fifth Option</a>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="dropdown-menu dropdown-menu-sm position-static show">
<a class="dropdown-item" href="#">First Option</a>
<a class="dropdown-item" href="#">Second Option</a>
<a class="dropdown-item" href="#">Third Option</a>
<a class="dropdown-item" href="#">Fourth Option</a>
<a class="dropdown-item disabled" href="#" tabindex="-1">Fifth Option</a>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Seperated</label>
<div class="col-lg-4">
<div class="dropdown-menu dropdown-menu-sm position-static show">
<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item toggle selected" href="#">Toggle Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="#" tabindex="-1">Different Option</a>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="dropdown-menu dropdown-menu-sm position-static show">
<a class="dropdown-item" href="#">First Option</a>
<a class="dropdown-item toggle selected" href="#">Toggle Option</a>
<a class="dropdown-item" href="#">Third Option</a>
<a class="dropdown-item" href="#">Fourth Option</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="#" tabindex="-1">Different Option</a>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Icon</label>
<div class="col-lg-4">
<div class="dropdown-menu dropdown-menu-sm position-static show">
<a class="dropdown-item" href="#"><i class="icon-package"></i> First Option</a> <a class="dropdown-item toggle selected" href="#"><i class="icon-format"></i> Toggle Option</a> <a class="dropdown-item" href="#"><i class="icon-print"></i> Third Option</a> <a class="dropdown-item disabled" href="#" tabindex="-1"><i class="icon-settings"></i> Fourth Option</a>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="dropdown-menu dropdown-menu-sm position-static show">
<a class="dropdown-item" href="#"><i class="icon-package"></i> First Option</a>
<a class="dropdown-item toggle selected" href="#"><i class="icon-format"></i> Toggle Option</a>
<a class="dropdown-item" href="#"><i class="icon-print"></i> Third Option</a>
<a class="dropdown-item disabled" href="#" tabindex="-1"><i class="icon-settings"></i> Fourth Option</a>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<script>
$(".dropdown-item.toggle").on( "click", function() {
$(this).toggleClass('selected');
});
</script> |
...