UI Component Lab 日本語

← All components

Action

Menu

A list of actions that pops up from a button.

Also known as

How to recognize it

A button, often with a downward arrow or a “⋯” icon. Pressing it shows a small panel of action names stacked vertically.

Variations

Overflow menu
Opened from an icon-only “⋯” button, often in table rows or cards to hold extra actions.

Behavior

  • Opening the menu moves focus to its first item.
  • Choosing an item runs that action and closes the menu.
  • Pressing Esc, pressing Tab, or clicking outside closes the menu without running anything.

Keyboard

KeyAction
Enter / SpaceOn the button, opens the menu. On an item, runs it and closes the menu.
↓On the button, opens the menu at the first item. In the menu, moves to the next item.
↑On the button, opens the menu at the last item. In the menu, moves to the previous item.
Home / EndMoves to the first or last item.
EscCloses the menu and returns focus to the button.
TabCloses the menu and moves on to the next element.

Usage notes

  • Open it on click, not on hover.
  • Align the panel with the left or right edge of its button.
  • Select: A menu runs an action when an item is chosen; a select keeps the chosen option as a form value.
  • Split button: A menu button only opens the menu; a split button also runs a main action directly.
  • Toolbar: A menu hides actions in a list that opens on demand; a toolbar keeps a group of controls visible in a row.

Sources