Best Practices

Properties

MenuTrigger

More actions trigger

• Includes different actions related to the same object, such as the menu for a promotion that includes Edit, Duplicate, Deactivate, and Archive.
• It should be triggered by an IconButton with a IconDotsThreeVertical icon and a hidden More actions label.

Read the IconButton documentation for more information.

Custom label trigger

• Represents a single action which has more specific variants, such as a Create page menu that includes the options Landing page and Category page.
• It should be triggered by a Button with a visible label that is followed by an IconCaretDownSmall icon.

Read the Button documentation for more information.

MenuItem

• Use sentence case but capitalize proper nouns.
• Don’t use punctuation, more than three words, or personal pronouns.
• Use a critical MenuItem when it triggers an irreversible action. Prefer to keep actions reversible and not require this.

More actions trigger

• All the MenuItems should have icons and include a verb in the infinitive in their label.
• When the context already has a label for the object, remove the object from the label. For example, use Edit instead of Edit product. Leave the object explicit when the Menu has the same action for different objects, such as Edit product and Edit SKUs.
• Use a verb that reflects the exact action that the Menu Item triggers. For example, use Rename instead of Change name.
• Reuse existing labels.

Custom label trigger

• Don’t use verbs or include icons.

MenuSeparator

Use a divider to separate regular actions from destructive actions. For example, a Delete action in a menu should be the last one, and there should be a divider before it.

Position

• Position in a container: Right-align the MenuTrigger and, when it’s part of a group of actions, position it as the last action.
• Pairing a tertiary MenuTrigger with other content: Use the Bleed component to ignore the box of a tertiary action and align it based on its icon and/or label.

Behavior

Disabling

• Never disable the MenuTrigger, only disable MenuItems.
• Use a disabled MenuItem only if it becomes enabled in some condition. For example, a Publish action that is only enabled when edits have been made.
• When the reason why a MenuItem is disabled might be unclear, leave the action enabled and show a modal explaining it when triggered.
• Don’t display a Tooltip when hovering a disabled MenuItem.