Description

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

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.

Don’t use:

If there are more than 10 action options → consider using a toolbar or a /wiki/spaces/UserExp/pages/1390479038.
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.

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	Up - Navigates to the previous action. Stops at the first item in the list. Down - Navigates to the next action. Stops at the last item in the list. 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	Moves focus to the next menu item with a label starting with the typed character(s), if such an item exists. Typing multiple characters in rapid succession moves the focus to the next menu item starting with the string of typed characters. If no item labels match the typed character(s), the focus does not move.

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>