DropdownMenu

Popular

Dropdown menu with keyboard navigation.

menudropdownnavigation

Import

import { DropdownMenu } from "@/components/ui";

Basic Usage

DropdownMenu Preview

Code

tsx

<DropdownMenu
  trigger={<Button variant="ghost" size="sm"><MoreVertical /></Button>}
  items={[
    { type: "item", label: "Edit", icon: "Edit", onClick: handleEdit },
    { type: "item", label: "Duplicate", icon: "Copy", onClick: handleDuplicate },
    { type: "separator" },
    { type: "item", label: "Delete", icon: "Trash", destructive: true, onClick: handleDelete },
  ]}
/>

With Groups

Organize items into groups

1<DropdownMenu
2  trigger={<Button>Actions</Button>}
3  items={[
4    {
5      type: "group",
6      label: "Actions",
7      items: [
8        { type: "item", label: "Edit", icon: "Edit" },
9        { type: "item", label: "Copy", icon: "Copy" },
10      ]
11    },
12    { type: "separator" },
13    {
14      type: "group",
15      label: "Danger Zone",
16      items: [
17        { type: "item", label: "Delete", destructive: true },
18      ]
19    },
20  ]}
21/>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring