Description

An action menu is a set of actions related to an element, component, or area of the application.

Verint LUX Design System > Action Menus > 01_menu.png

Verint LUX Design System > Action Menus > 02_menu.png

Verint LUX Design System > Action Menus > 03_menu.png

added

Verint LUX Design System > Action Menus > image-20210217-161525.png

Usage & Behavior

General Guidelines

A menu can be triggered in one of these ways:

Clicking a dedicated icon, for example, the More icon in a Data Table row
Right-clicking on a dedicated area on the screen.
Selecting text, for example in a transcription.

Structure

Action menus consist of:

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.

Placement and Positioning

Actions menus will appear:

over the page, hiding any content behind it.
to the right or left of the trigger element, depending on the location of the trigger element on the screen.
below the trigger element, unless it is close to the bottom of the window. In this case, it will appear above.

Regular actions menu can appear anywhere on the screen, except the Hamburger menu. The hamburger menu will appear only on the top right corner and will contain actions relevant to the entire workspace (e.g., 'reset workspace' action).

Verint LUX Design System > Action Menus > image-20210217-162628.png

Internal Logic

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.

Best practices

Use:

To show a small list of actions related to a single element.
Add a hamburger menu only for higher-level actions on the entire workspace at the top left corner. Only one hamburger menu can be added.

Don’t use:

If there are more than 10 action options → consider using a toolbar or a Ribbon.
For selecting values → use a Drop-down Menu

General

Keep option labels short and informative.
Use right-click menus only as a second way to perform actions. The right-click option is hidden and may not be available for some users.
Avoid mixing toggle action with other actions inside a single group.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Zeplin link	Screen thumbnail
https://zpl.io/VxPedqm

Code

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