Components
DropdownMenu
Context menu with items, sub-menus, checkboxes, and radio groups.
DropdownMenu
A dropdown menu component with items, sub-menus, checkbox items, and radio groups. Built on Base UI Menu with Motion animations.
Import
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem } from '@mks2508/mks-ui/react';Basic Usage
<DropdownMenu>
<DropdownMenuTrigger>
<Button variant="outline">Open Menu</Button>
</DropdownMenuTrigger>
<DropdownMenuPortal>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Log out</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenuPortal>
</DropdownMenu>With Groups
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Duplicate</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>Danger</DropdownMenuLabel>
<DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>Disabled Items
<DropdownMenuItem disabled>Disabled item</DropdownMenuItem>API Reference
| Component | Key Props | Description |
|---|---|---|
DropdownMenu | open, onOpenChange | Root provider |
DropdownMenuTrigger | asChild | Trigger element |
DropdownMenuPortal | — | Portal wrapper |
DropdownMenuContent | side, align | Dropdown panel |
DropdownMenuItem | disabled, onSelect | Menu item |
DropdownMenuGroup | — | Item group wrapper |
DropdownMenuLabel | — | Section label |
DropdownMenuSeparator | — | Visual divider |
DropdownMenuCheckboxItem | checked, onCheckedChange | Checkbox item |
DropdownMenuRadioGroup | value, onValueChange | Radio group |
DropdownMenuRadioItem | value | Radio item |