Dropdown menu | Lime design system

Examples

Goal actions

From an icon

View options

When to use it

Use: Commands that act on one item: rename, duplicate, share, delete.
Use: Settings that stay on or off (checkbox items) or one of a few (radio items).
Use: An icon button that would otherwise need five icon buttons beside it.
Not for: Choosing one value for a field from a list. Use Select.
Not for: The only action on the row. Use Button.
Not for: A panel with inputs. Use Popover.

9 rules

Must: Mark a deleting command destructive and put it last, after a separator. Because at the top Delete is the first item a hurried tap or the arrow keys reach.
Must: Open an AlertDialog from a destructive item; never delete on one press. Because an item runs on one press or Enter, so a slip deletes the goal for good.
Must: Use a checkbox or radio item for a setting that stays on or one of a few. Because a plain item has no checked state, so nobody can tell the setting is on.
Must: Give an icon trigger an aria-label such as More actions. Because an icon-only trigger is announced as a menu button with no name.
Should: Start each item with a verb in one to three words, sentence case.
Should: Leave icons off items unless they separate items that read alike.
Should: Group with labels or move to a page past about seven items.
Never: Nest a submenu in a submenu; one level only. Because on a 390px screen a second side-opening level covers the menus it came from.
Should: Set align="end" for an icon button at the end of a row.

4 checks

: The trigger has aria-haspopup="menu" and aria-expanded; the panel is role menu with menuitem children.
: Enter, Space or Arrow Down opens; Arrows move and loop; letters jump; Enter runs and closes.
: Arrow Right opens a submenu and Left closes it (mirrored in right to left); Escape closes.
: Checkbox and radio items carry aria-checked.

7 edge cases

Submenu in right to left: The chevron rotates and the panel opens on the left.
Long item: The panel has no max width; a long item widens it.
Short screen: The panel caps at the available height and clips; use a ScrollArea for a very long list.
No items: Opens an empty panel; disable the trigger instead.
Command opens a dialog: Let the menu close first; focus returns to the menu trigger.
Forced colors: The highlight fill is replaced and may show no difference; add an outline.
Reduced motion: The menu appears at once.

7 props

19 tokens

--raised: #ffffff
--radius-panel: 16px
--shadow-menu: 0 8px 24px -6px rgb(var(--shadow-ink) / 0.16), 0 2px 6px rgb(var(--shadow-ink) / 0.06)
--popup-max: 320px
--fg: #0f0f0d
--radius-md: 10px
--text-sm: 14px
--surface-2: #efeeea
--danger-text: #b42323
--danger-tint: #fdebeb
--fg-disabled: #a6a49b
--fg-3: #6b6a63
--text-xs: 12px
--line: #e6e4df
--dur-base: 200ms
--dur-fast: 140ms
--ease-out: cubic-bezier(0.16, 1, 0.3, 1)
--ease-in: cubic-bezier(0.4, 0, 1, 1)
--scale-enter: 0.97