Patternbook

Dropdowns — Action menu with sections and shortcuts

An open action disclosure groups icon commands, shortcut hints and a separate deletion action. Use for compact secondary actions on one item.

1440 × 480

Open in new tab

Pattern notes

When to use
Use for commands associated with a record or card. Choose dropdowns-account-menu for identity navigation or dropdowns-filter-checkboxes for multiple selections. Variations: change the command labels, omit shortcuts when the host has none, or remove the disabled example.
Hierarchy
Read Options first, then common commands, the organization group and Delete. Labels use up to 3 words; shortcut hints one character; the group heading one word. Delete uses explicit wording and a trash icon. Lists retain role=list, and items are plain buttons with native button semantics.
Responsive
The root is 288px below 640px and 320px from 640px. The trigger and 224px panel retain their size and left alignment at every width. The 304px reserve contains the open panel.
Layout
A relative details root is 288px (w-72) wide, 304px (h-[19rem]) high and 320px (sm:w-80) wide from 640px. A 44px standard outlined trigger precedes a left-aligned 224px (w-56) panel by 8px. The rounded-md panel has a neutral-200 border, shadow-lg and 4px padding. Three 32px command rows have 16px icons, 8px gaps and right-aligned 12px monospace shortcut hints. A divider and 12px Organize heading introduce two more rows; another divider isolates Delete.
States
The details is open initially. Trigger hover fills neutral-50 and keyboard focus draws a 2px neutral-900 outline offset 2px. The chevron rotates 180 degrees while open. Enabled rows hover or focus to neutral-100, with a 2px inset focus outline. Archive is natively disabled with a not-allowed cursor and 50% opacity. Shortcut hints and command buttons are slots for host behavior; no keyboard shortcut handlers are included.
Desktop wireframe
┌──────────────────────────────────────────────────────┐
│ [Options ^]                                          │
│ ┌────────────────────────────────┐                   │
│ │ Icon [Edit]                E   │                   │
│ │ Icon [Duplicate]           D   │                   │
│ │ Icon [Copy link]           C   │                   │
│ ├────────────────────────────────┤                   │
│ │ Organize                       │                   │
│ │ Icon [Move to folder]          │                   │
│ │ Icon [Archive - disabled]      │                   │
│ ├────────────────────────────────┤                   │
│ │ Icon [Delete]                  │                   │
│ └────────────────────────────────┘                   │
└──────────────────────────────────────────────────────┘

More in Dropdowns

View all Dropdowns patterns