Skip to content
IndexDesign corpus

Dropdown Menu

92 resources ship this component · Selection

Also called: dropdown, menu, droplist, dynamic menu, action menu, popup menu.

Before you ship8 checks
  1. 01Trigger affordance — The element that opens the menu: an overflow icon, chevron button, or right-click target
  2. 02Menu item anatomy — The structure of each action: label, optional leading icon, optional trailing shortcut, optional destructive styling
  3. 03Section dividers and groups — Dividers and/or labels that break related actions into sections once the menu gets large
  4. 04Destructive item styling — Visual differentiation — typically the danger colour — for actions that cannot be undone
  5. 05Nested submenu — A secondary menu triggered by a parent item, used for grouping related but distinct actions
  6. 06Disabled items — Menu items that are visible but cannot be triggered, indicating an unavailable action
  7. 07Positioning and overflow — The menu's placement relative to its trigger, repositioning automatically to stay within the viewport
  8. 08Keyboard shortcut display — Shortcut hints aligned to the trailing edge of the item label

Checks from checklist.design, MIT.

Ships it92