Component
Menu
A frosted dropdown of grouped, divider-separated actions that opens from any trigger element, with support for checked state and a destructive style.
Standalone
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 list 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 details", onSelect: onViewDetails }] }]}
/>Capabilities
| Prop | Type | Description |
|---|---|---|
| triggerrequired | React.ReactNode | - |
| groupsrequired | NativeMenuGroup[] | - |
| align | "start" | "center" | "end" | - |
| side | "top" | "bottom" | "left" | "right" | - |
| className | string | - |