Menu

• When users need to select from a short list of related actions or settings
• To present options that apply to a specific context (for instance card, row, or item)
• When inline space is limited but the action set still needs to be accessible
• When providing quick access to less prominent actions (such as edit, share, or report)
• If the options do not require extra description or form elements
• When consistency in placement or interaction across surfaces is important

• When the user must choose from a large number of options — use a Select or Search component instead
• To expose high-priority or primary actions; use Buttons or surface actions
• If the menu content needs to persistently stay open while interacting with it — consider a Modal
• When the action labels require more than a single line of text to be clear
• For exposing navigation destinations; use a Tab or a Link List instead
• Hide critical or high priority actions in an overflow menu (they should live in the main menu)

• Provide clear, specific trigger labels for standard menus to communicate what kind of options will be shown
• Use sentence case for readability, such as “Sort by” or “More options”
• Keep labels concise; one to three words is ideal
• Prefer verbs or concise noun phrases like “Filter” or “Display options”
• Use icon-only triggers, like overflow menu only when the context is obvious or screen readers are properly supported with aria-label

• Use clear, descriptive menu labels. Avoid phrases like “Click here” unless the surrounding layout already makes the links purpose obvious, known as visually scoped.
• Use “Placeholder text” as a Item label or Menu Label - it harms accessibility
• Use ALL CAPS for Menu Labels or Item Labels - it reduces readability, especially for assisted technology
• Use icons alone without alternative text or descriptive labeling; this creates ambiguity and screen reader issues
• Use Item Labels that mislead or do not reflect the options inside (for instance labels that say “Download” but includes “Edit” or “Share”)

• Keep menu items left aligned (for LTR layouts) to support fast scanning and screen reader consistency
• Allow menu item labels to wrap within the container rather than adjusting the menu with

• Truncate labels when they exceed the fixed width; allow them to wrap instead
• Center-align menu text; it disrupts left to right scanning and reduces readability

Keep overall menu width to the system-standard fixed-width of 224 px to ensure visual consistency across the product

Override the default menu width; resizing the menu to fit longer text break alignment and creates inconsistent layouts

Align menu triggers with surrounding content or controls to maintain visual rhythm

• Place menus without clear visual anchors (floating randomly with no trigger context)
• Avoid placing far from the content it affects
• Hide critical actions inside an overflow menus if they are used frequently

• Provide descriptive text labels to clarify the meaning of the action;
• Use standard recognizable icons such as Pencil for edit or Trash for delete
• Align icons to the left of the menu item text for LTR layouts (right for RTL)
• Keep icon size consistent
• Provide aria labels for screen readers within the Button List component

• Use icons without text
• Non-standard or decorative icons that do not add meaning or clarity
• Mix left- and right-aligned icons within the same menu; always maintain consistency and consider localization
• Avoid over-using icons; they should reinforce, not distract
• Use icons that conflict with platform conventions (for example a “plus” icon for delete)