Overlays
MenuPopover
A dot-menu popover. Items cascade in, and the whole panel scales out of the trigger corner.
Close button
Usage
<MenuPopover
align="start"
stagger={30}
dismissible={false}
spring="smooth"
items={[
{ id: "edit", label: "Edit" },
{ id: "delete", label: "Delete", destructive: true },
]}
/>How the motion works
The panel's transform origin is pinned to the trigger corner so it unfolds out of the button rather than appearing centred on itself. Items carry index-proportional transition delays for the cascade. Focus moves into the panel on open and returns to the trigger on close, so the menu is fully operable without a pointer.
useSpringValueusePress
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | MenuItem[] | — | Each has id, label and optional icon, destructive, disabled, onSelect. |
| trigger | ReactNode | — | Custom trigger content. Defaults to a three-dot glyph. |
| align | "start" | "end" | "start" | Which edge the panel aligns to. |
| stagger | number | 30 | Delay between item entrances, in ms. |