Actions / Menu

import { EditIcon, CopyIcon, Menu, MoreIcon, TrashIcon } from "@plop-ui/react";

<Menu
  label="Sketch actions"
  items={[
    { label: "Rename", icon: <EditIcon />, keys: ["E"], onSelect: rename },
    { label: "Duplicate", icon: <CopyIcon />, keys: ["Shift", "D"], onSelect: duplicate },
    "separator",
    { label: "Delete sketch", icon: <TrashIcon />, danger: true, onSelect: remove },
  ]}
/>

<Menu label="More actions" icon={<MoreIcon />} align="end" items={items} />

Change every prop live in the playground.

Props

Prop	Type	Default	What it does
items required	MenuItem[]	—	The actions, in order: `{ label, onSelect, icon?, keys?, danger?, disabled? }`, or `"separator"` for a rule between them.
label required	string	—	What the menu is for, e.g. "Sketch actions". The trigger's text, or its accessible name with `icon`.
align	"start" \| "end"	start; use end for a menu at the right of a row	Which edge the sheet lines up with.
className	string	none	Extra class on the wrapper around the trigger and sheet.
icon	ReactNode	none	Makes the trigger a round icon sticker (e.g. `<MoreIcon />`); the label is then read, not shown.

Use it well

DoKeep it to actions on one thing, with the destructive one last and red.

Don'tUse it for navigation or for picking a value; links belong in the page, values in a Select.

Accessibility

The trigger has aria-haspopup="menu" and aria-expanded; items are role="menuitem" buttons with roving focus.
Arrows move and wrap, Home and End jump, a letter jumps to the item that starts with it, Escape closes and returns focus to the trigger.
Keycaps are hints only and hidden from screen readers; the red item also buzzes differently on phones, so it never relies on color alone.