Dropdown menu Design system

Bring related actions into easy-to-manage menus.

8 checks · 3 content groups

Checklist contents

Structure and meaning Interaction and usability Complete the experience

Review progress

Structure and meaning

Compare information and presentation in context of use.

Name the button that opens the menuIndicates what action the menu contains and reflects the open state.The three-dot button still needs an access name according to the object it is affecting.Example The button is labeled “Operate New Design Draft”.Write specific actionsUse distinguishable verbs and add shortcuts only when actually supported.Keep the icon column and shortcut column aligned; only shows the shortcut that actually works for that action.Group of related tasksUse headings or separation when the number of actions is large.Place actions and goals side by side; Dividers need to reflect a meaningful grouping, not just an equal division of items.Separate actions that are difficult to undoSet delete or revoke separately, explain confirmation if necessary.Keep actions that are difficult to undo separate from frequently used tasks and far enough away to reduce accidental clicks.

Interaction and usability

Try the operation, change the status and continue working.

Explain why it cannot be usedDon't create a disabled item that the user doesn't know what to do to open it.Explain the unmet condition with usable content on focus or touch, not just a tooltip on hover.Open, browse and close using the keyboardUse the appropriate menu behavior, Escape and return focus to the open button.Keep the menu in the screenChange direction or roll when near edge; Do not cover the necessary trigger point.Open the menu in the corners of the screen, with long lists and enlarged text to see if it changes direction or scrolls.

Complete the experience

Check for details that are easy to miss when putting the design into use.

Keep submenus limited and controllableIf a group opens a submenu, make that affordance clear, support entering and leaving it with a keyboard, and avoid deep nesting that causes users to lose their place.Try submenus near the edge of the screen and on the touch screen; the user must be able to open it without keeping the mouse on a very narrow line.

Progress is saved automatically in this browser.

GUIDANCE