Menu

An action dropdown scoped to a single item. Distinct from Nav Flyout ( /design/components/nav-flyout) — use Menu for contextual actions like edit, duplicate, and delete, not site navigation. Supports icon + label rows, section dividers, right-aligned shortcuts, and destructive items.

Default + Sections

Composed of standard rows (icon + label + optional shortcut), dividers, and destructive rows (red text). Section labels group related rows together.

Trigger
Section label

Rules

  • Not Nav Flyout — Nav Flyout handles site-structure navigation; Menu groups immediate actions on a selected item (edit, duplicate, delete, etc.).
  • Panel radius --r-lg (12px), shadow --sh-full. Row padding 9px var(--sp-lg) + 4px bottom optical correction.
  • Destructive rows use --c-negative for text and icon. Hover applies a negative 10% tint. Never use a solid red background.
  • Disabled rows use opacity:0.45 + pointer-events:none. Never disable without a reason — surface it via a tooltip or meta text.
  • Shortcuts are right-aligned, rendered in --ff-en + grey. Use Unicode symbols directly for modifier keys (⌘, ⌫, ↑, etc.).
  • Keyboard accessibility: role=menu on the container,role=menuitem on each row. Arrow-key navigation required.