Components
Menu
Animated context menu component with Animate UI spring transitions.
Menu
An animated context menu component built on Animate UI primitives with spring-based enter/exit transitions.
Import
import { Menu, MenuTrigger, MenuPortal, MenuPositioner, MenuPopup, MenuArrow, MenuItem, MenuGroup, MenuGroupLabel, MenuSeparator, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem } from '@mks2508/mks-ui/react';Basic Usage
<Menu>
<MenuTrigger>
<Button variant="outline">Actions</Button>
</MenuTrigger>
<MenuPortal>
<MenuPositioner sideOffset={4}>
<MenuPopup>
<MenuItem>Edit</MenuItem>
<MenuItem>Duplicate</MenuItem>
<MenuSeparator />
<MenuItem>Archive</MenuItem>
<MenuItem variant="destructive">Delete</MenuItem>
</MenuPopup>
</MenuPositioner>
</MenuPortal>
</Menu>With Groups and Labels
<MenuPopup>
<MenuGroup>
<MenuGroupLabel>Edit Actions</MenuGroupLabel>
<MenuItem>Cut</MenuItem>
<MenuItem>Copy</MenuItem>
<MenuItem>Paste</MenuItem>
</MenuGroup>
<MenuSeparator />
<MenuGroup>
<MenuGroupLabel>File Actions</MenuGroupLabel>
<MenuItem>Save</MenuItem>
<MenuItem>Rename</MenuItem>
</MenuGroup>
</MenuPopup>With Checkbox Items
<MenuPopup>
<MenuCheckboxItem checked>Show Toolbar</MenuCheckboxItem>
<MenuCheckboxItem>Show Sidebar</MenuCheckboxItem>
</MenuPopup>API Reference
| Component | Key Props | Description |
|---|---|---|
Menu | open, onOpenChange | Root provider |
MenuTrigger | asChild | Trigger element |
MenuPortal | — | Portal with AnimatePresence |
MenuPositioner | side, align, sideOffset | Positioning wrapper |
MenuPopup | slots | Animated content panel |
MenuArrow | slots | Arrow indicator |
MenuItem | disabled, variant | Menu item |
MenuGroup | — | Item group wrapper |
MenuGroupLabel | — | Group label |
MenuSeparator | — | Visual divider |
MenuCheckboxItem | checked, onCheckedChange | Checkbox item |
MenuRadioGroup | value, onValueChange | Radio group |
MenuRadioItem | value | Radio item |