Docs/DropdownMenu

DropdownMenu

Dropdown menu with trigger, items, and separators.

Usage

tsx

1import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@storm-ds/ui'
2
3<DropdownMenu>
4  <DropdownMenuTrigger>
5    <Button>Options</Button>
6  </DropdownMenuTrigger>
7  <DropdownMenuContent>
8    <DropdownMenuItem>Edit</DropdownMenuItem>
9    <DropdownMenuItem>Delete</DropdownMenuItem>
10  </DropdownMenuContent>
11</DropdownMenu>

Default

With Labels

tsx

1<DropdownMenu>
2  <DropdownMenuTrigger>
3    <Button>Options</Button>
4  </DropdownMenuTrigger>
5  <DropdownMenuContent>
6    <DropdownMenuLabel>Account</DropdownMenuLabel>
7    <DropdownMenuItem>Profile</DropdownMenuItem>
8    <DropdownMenuItem>Settings</DropdownMenuItem>
9    <DropdownMenuSeparator />
10    <DropdownMenuLabel>Actions</DropdownMenuLabel>
11    <DropdownMenuItem>Export</DropdownMenuItem>
12  </DropdownMenuContent>
13</DropdownMenu>

Destructive Item

tsx

1<DropdownMenu>
2  <DropdownMenuTrigger>
3    <Button>Options</Button>
4  </DropdownMenuTrigger>
5  <DropdownMenuContent>
6    <DropdownMenuItem>Edit</DropdownMenuItem>
7    <DropdownMenuSeparator />
8    <DropdownMenuItem destructive>Delete</DropdownMenuItem>
9  </DropdownMenuContent>
10</DropdownMenu>

Note

The dropdown provides styled markup with menu/menuitem ARIA roles. For interactive show/hide behavior, wrap in a client component managing open state.

Props

Prop	Type	Default	Description
destructive	boolean	false	Red text for dangerous actions (DropdownMenuItem)
className	string	-	Custom classes on any sub-component

Use with AI

Create a Next.js component using Storm UI's DropdownMenu. Import: `import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel } from '@storm-ds/ui'`. Provides styled markup with menu/menuitem ARIA roles. For interactive show/hide, wrap in client component. Use DropdownMenuLabel to group items with a heading. Use destructive prop on DropdownMenuItem for dangerous actions shown in red. Example: `<DropdownMenu><DropdownMenuTrigger><Button>Options</Button></DropdownMenuTrigger><DropdownMenuContent><DropdownMenuLabel>Actions</DropdownMenuLabel><DropdownMenuItem>Edit</DropdownMenuItem><DropdownMenuSeparator /><DropdownMenuItem destructive>Delete</DropdownMenuItem></DropdownMenuContent></DropdownMenu>`

AlertDialog

ContextMenu