...
An action menu is a set of actions related to an element, component, or area of the application.
Workspace menu | Data table column menu | General / data table row menu | Widget menu |
|---|---|---|---|
 |  |  |  |
Usage & Behavior
General Guidelines
...
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.
Content
The width of the options list should adapt to the longest option, up to a maximum width. Where options are too long they should be truncated with a tooltip displaying the full text shown on hover.
Placement and Positioning
...
Action options may be sorted by importance or popularity.
States
State | Menu | Icon menu | Comment |
|---|---|---|---|
Regular |  |  | |
Hover |  |  | |
Selected |  |  | In case of a toggle action |
Disabled |  |  | |
Focused |  |  | When using the arrow keys to navigate between items |
Focused, Hover |  |  | |
Focused, Selected |  |  |
Interaction
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.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Description |
Tab | Navigates to the next action. |
Shift + Tab | Navigates to the previous action. |
Space | Applies the focused action and closes the menu. |
Enter | Applies the focused action and closes the menu. |
Esc | Closes the menu and returns the focus to the menu trigger without applying any action. |
Arrows |
Holding down the key will scroll continuously. |
Page Up/Home | Navigates to the first item. |
Page Down/End | Navigates to the last item. |
a-z, A-Z |
|
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> |
...