Dropdown
@/components/kamod-ui/dropdown
Installation
Import Dropdown primitives from `@/components/kamod-ui/dropdown`.
pnpm add @kamod-ch/uiUsage
Use DropdownTrigger to toggle, DropdownContent for the panel (side, align, sideOffset). Optional DropdownSub / DropdownSubTrigger / DropdownSubContent for nested menus; DropdownSubContent supports side="inline-end" (default) or side="inline-start" to open toward the inline end or start (use inline-start when the trigger is near the viewport edge to avoid horizontal page scroll). Checkbox and radio items do not use DropdownItem’s auto-close behavior where noted.
import { Dropdown } from "@/components/kamod-ui/dropdown";<Dropdown />Basic
Default trigger styling and menu items.
Trigger asChild
Use a Button (or other element) as the trigger.
Groups, shortcuts, icons
Labels, separators, keyboard hints, and leading icons.
Checkbox items
Toggle state without closing the root menu.
Radio group
Single selection; menu closes after choosing (DropdownRadioItem).
Positioning
side, align, and sideOffset on DropdownContent.
API Reference
Props, slots and variants for this component.
Dropdown
Dropdown component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| defaultOpen | boolean | false |
| DropdownTrigger asChild | boolean | false |
| DropdownContent forceMount | boolean | false |
| DropdownContent side | "top" | "bottom" | "left" | "right" | "bottom" |
| DropdownContent align | "start" | "center" | "end" | "start" |
| DropdownContent sideOffset | number | 4 |
| DropdownItem variant | "default" | "destructive" | "default" |
| DropdownItem inset | boolean | false |
| DropdownLabel inset | boolean | false |
Accessibility Notes
Trigger exposes aria-haspopup="menu", aria-expanded, and aria-controls. Content is role="menu" with role="menuitem" (and menuitemcheckbox / menuitemradio where used). Escape closes the menu and returns focus to the trigger.