You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Actions and Inputs

Action Menu

Design Spec

With Icons and Subheaders

As a Submenu

Width Options

Width options share the same properties found on the Popover.

Overflow Handling


Best Practices

The Action Menu component should:

  • Be easily discoverable. Action menus or right-click menus are often hardly discoverable. Especially in cases where there is no visual indication or a button to reveal the menu.
  • Have menu button placed to the right side of the affected item.
  • Present main actions before menu button, but secondary actions should be placed in an action menu itself.

For data entry in a Form, use the Select over the Action Menu.


Content Guidelines

Button name should describe the items in the menu

Users should be able to use the button name to predict what the options in the menu will apply to.

Action menu buttons should follow the content guidelines for buttons.

Clearly name each item

Each item in the menu should be clearly named. Users should be able to predict what will happen when they click.

Each item should always start with a strong verb to describe the action. Add a noun to provide more context on what will be affected in cases where the verb alone isn’t clear enough. Format: [Verb] + [noun].

Use sentence case (capitalize only the first word and proper nouns) and avoid unnecessary words and articles such as the, an, or a.

Book job

View invoice

Rename file

Book

View an invoice

File name changes

Item names should match destination

Menu item names should be the same as the destination they take the user to.

“Add existing location” menu item opens a drawer with header “Add existing location”.

“Add existing location” menu item opens a drawer with header “Existing locations”.


Code

Handling click outside

Be careful with onClickOutside prop, especially when ActionMenu.Item are being used to open overlays, like Modal, Dialog, etc.

In this case ActionMenu needed to be closed explicitly before overlay to be opened. Check the example below:

Importing

import { ActionMenu } from '@servicetitan/design-system';