Feedback

Dropdown

A floating menu of actions or options anchored to a trigger element. Use for action menus (kebab), one-of-N selects with search, status transitions, and notification previews. White surface, soft-2 shadow, 8 px radius, 4 px internal padding.

Overview

One chrome (.dropdown) for all menu surfaces — kebab menus, status pickers, sort menus, notification previews. The chrome stays constant; only the contents change. Width adapts to content but caps at 320 px for menus and 420 px for richer previews.

Use cases

  • Kebab action menus. Destructive + rare actions on a row or card (Archive, Duplicate, Delete).
  • Status transitions. Click a status pill to open a dropdown listing the valid next states.
  • Sort menus. Click a sort button to pick from "Newest", "Alphabetical", "Recently updated".
  • Notification preview. Click the bell to see the most recent 5 inbox cards before deciding to open the full inbox.

Properties

ElementClassNotes
Surface.dropdownWhite background, soft-2 shadow, 8 px radius, hairline border, 4 px internal padding.
Menu item.dropdown-item32 px height, full-width clickable row. Hover background = --row-hover.
Item icon.icon-svg before label16 px icon with a 10 px gap from the label.
Destructive item.dropdown-item.dangerDanger-red label + icon. Sits last in the menu with a divider above.
Divider.dropdown-divider1 px hairline between groups inside the menu.
Section label.dropdown-section11 px uppercase eyebrow inside the menu, for grouped items.

Best practices

  • Close on outside click + Escape. Both should dismiss the menu. Trap focus inside the menu while open.
  • Destructive items last + divider. Put Delete / Archive / Revoke after a divider so the user has visual separation from safe actions.
  • ≤7 items. If you have more, group with section labels or break into a side panel.
  • Anchor to the trigger. Top-left of the dropdown aligns with bottom-left of the trigger (or right for end-aligned triggers). Don't float.