Width options share the same properties found on the Popover.
The Action Menu component should:
For data entry in a Form, use the Select over the Action 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.
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
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”.
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:
import { ActionMenu } from '@servicetitan/design-system';