A button that grows into its menu. The trigger stretches into a panel of options and shrinks back when one is chosen.
Nothing chosen yet
pnpm dlx shadcn@latest add @latheui/morph-menuPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Morph Menu is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| label* (required) | string | — | The trigger's text. It stays at the top of the open menu. |
| items* (required) | MorphMenuItem[] | — | The options, in order. |
| onSelect | (item) => void | — | Called with the chosen item. The menu then closes. |
| icon | ReactNode | — | Shown before the label. |
| align | "start" | "end" | "start" | The edge of the trigger the menu grows from. |
| width | number | 264 | Width of the open menu in px. |
| open / defaultOpen | boolean | — | Controlled or initial state. |
| onOpenChange | (open: boolean) => void | — | Called when the menu opens or closes. |
| Prop | Type | Default | Description |
|---|---|---|---|
| id* (required) | string | — | Unique among the items. |
| label* (required) | string | — | Row text. |
| description | string | — | A second line under the label. |
| icon | ReactNode | — | Shown before the label. |
| shortcut | string | — | A key hint at the end of the row. Display only. |
| href | string | — | Makes the row a link. |
| destructive | boolean | — | Colors the row as a destructive action. |
| separator | boolean | — | Draws a divider above the row. |
| disabled | boolean | — | Skipped by the keyboard and ignores clicks. |
<MorphMenu label="Account" align="end" width={320} items={items} />