Component
Menu
A frosted dropdown of grouped, dividers-separated actions that opens from any trigger element, with support for checked state and a destructive style.
The primitive
menu.tsx
<NativeMenu
trigger={<NativeButton label="Options" variant="secondary" size="sm" />}
groups={[
{ items: [
{ label: "Share", icon: <Share size={16} />, onSelect: () => {} },
{ label: "Copy reference", icon: <Copy size={16} />, onSelect: () => {} },
] },
{ items: [
{ label: "Delete", icon: <Trash size={16} />, onSelect: () => {}, style: "destructive" },
] },
]}
/>Example
Attached to the trailing icon button on a transaction row, surfacing overflow actions that don't fit in the row itself.
Payout to Chase Bank
menu-example.tsx
<NativeMenu
trigger={<button><DotsThree /></button>}
groups={[{ items: [{ label: "View receipt", onSelect: onViewReceipt }] }]}
/>Capabilities
| Prop | Type | Description |
|---|---|---|
| triggerrequired | React.ReactNode | — |
| groupsrequired | NativeMenuGroup[] | — |
| align | "start" | "center" | "end" | — |
| side | "top" | "bottom" | "left" | "right" | — |
| className | string | — |