Skip to content
Index730 resources
Dropdown Menu

Dropdown Menu

89 resources in the index ship this component, best first. Group: Selection.

Also called · dropdown · menu · droplist · dynamic menu · action menu · popup menu

Before you ship

8
  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 it

89